{"id":28501411,"url":"https://github.com/masterjaneza/scrolling-animation---v2","last_synced_at":"2026-03-10T13:04:55.880Z","repository":{"id":293953435,"uuid":"985597661","full_name":"masterjaneza/Scrolling-animation---V2","owner":"masterjaneza","description":"A scroll-triggered animation demo built with only HTML and CSS — now cleaner, smoother, and easier on the eyes. V2 brings modern colors and refined motion to showcase the experimental animation-timeline: view() feature as blocks gracefully reveal themselves on scroll.","archived":false,"fork":false,"pushed_at":"2025-06-11T11:22:05.000Z","size":59,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-28T18:12:20.406Z","etag":null,"topics":["animations","css-animations","css3","html5","modern","modern-ui","responsive","responsive-design","scroll","scrolling","v2"],"latest_commit_sha":null,"homepage":"https://scrolling-animation-v2.vercel.app","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/masterjaneza.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-18T05:35:28.000Z","updated_at":"2025-06-11T11:22:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"f79a5e5f-d573-4f4b-b5a0-fdee979a4f22","html_url":"https://github.com/masterjaneza/Scrolling-animation---V2","commit_stats":null,"previous_names":["masterjaneza/scrolling-animation---v2"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/masterjaneza/Scrolling-animation---V2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FScrolling-animation---V2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FScrolling-animation---V2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FScrolling-animation---V2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FScrolling-animation---V2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/masterjaneza","download_url":"https://codeload.github.com/masterjaneza/Scrolling-animation---V2/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FScrolling-animation---V2/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30334412,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T12:41:07.687Z","status":"ssl_error","status_checked_at":"2026-03-10T12:41:06.728Z","response_time":106,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animations","css-animations","css3","html5","modern","modern-ui","responsive","responsive-design","scroll","scrolling","v2"],"created_at":"2025-06-08T15:40:16.275Z","updated_at":"2026-03-10T13:04:55.876Z","avatar_url":"https://github.com/masterjaneza.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scrolling Animation | V2\n\nWelcome to the second version of the **Scrolling Animation** project — where raw function from V1 meets modern flair in V2. This version builds on the foundational scroll-triggered animation demo, polishing the visuals, enhancing responsiveness, and refining how each element enters the stage.\n\nStill HTML + CSS. Still lightweight. But now it’s got style.\n\n---\n\n## 🚀 What It Does\n\n- Dynamically renders a collection of blocks (`div.block`) that animate into view as you scroll down.\n- Uses the experimental CSS `animation-timeline: view()` property to tie animations directly to scroll behavior — no JavaScript needed.\n- Clean flexbox layout to arrange the blocks in rows and wrap them responsively.\n\n---\n\n## 🔧 Improvements from V1\n\nV1 was all grit, no glam, purely functional with basic layout and animation. **V2 brings the glow-up**:\n\n### 🎨 Design \u0026 Aesthetics\n\n- **Modern Color Palette:** Replaced flat *coral* with a more vibrant, gradient-based color scheme for a richer look.\n- **Visual Polish:** Blocks now have softer edges, subtle shadows, and smarter spacing that makes the layout feel less crowded and more intentional.\n- **Minimalist UI Refinement:** While still simple, V2 ditches the “prototype” look and edges closer to something you'd actually want to show off.\n\n### 💨 Animation Enhancements\n\n- **Smoother Transitions:** The clip-path reveal feels more fluid and natural.\n- **Fine-tuned Scroll Triggers:** The animation timing better matches scroll behavior, creating a more immersive feel.\n\n### 📱 Responsive Layout\n\n- Flex-wrap behaves more gracefully at different screen widths.\n- Layout scales better on smaller devices — still not fully mobile-first, but much improved from V1’s rigid grid.\n\n### 🧼 Cleaner Code\n\n- Improved structure in both HTML and CSS.\n- Less duplication, more clarity. Easier to expand or remix for future features.\n\n\n\n---\n\n---\n\n## ⚙️ Setup \u0026 Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V1.git\n\n**Open the Project:**\n\n- Open `index.html` in your browser  \n  **or**\n- Use **Live Server** in VS Code.\n--- \n\n---\n\n\n---\n\n## 🧪 License\n\nFeel free to use, modify, or remix this project. No pressure.  \nJust give credit where credit’s due - sharing is caring. 😉\n\n---\n\n## 🌟 Support the Project\n\nIf this helped you or made you smile, hit that ⭐ on GitHub, fork it, remix it, and tag me in your own creations. Let’s build scroll magic together.\n\n---\n\n## ✍️ Credits\n\nCrafted with pixels and passion by  \n**Davit Janezashvili**  \n_aka MasterJaneza – Creative Developer \u0026 Designer_\n\n---\n\n## ⚠️ Note\n\nIf you're using dark mode, some visuals might not look as intended. For the best experience, switch to light mode.\n\n---\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasterjaneza%2Fscrolling-animation---v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmasterjaneza%2Fscrolling-animation---v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasterjaneza%2Fscrolling-animation---v2/lists"}