Welcome to the second version of the Scrolling Animation project — where raw function from V2 meets modern flair in V4. This version builds on the foundational scroll-triggered animation demo, polishing the visuals, enhancing responsiveness, and refining how each element enters the stage.
Still HTML + CSS. Still lightweight. But now it’s got style.
- Dynamically renders a collection of blocks (
div.block) that animate into view as you scroll down. - Uses the experimental CSS
animation-timeline: view()property to tie animations directly to scroll behavior — no JavaScript needed. - Clean flexbox layout to arrange the blocks in rows and wrap them responsively.
Revamped visual style with fresh, modern color. now featuring smooth linear gradients for a more dynamic and appealing look.
- Modern Color Palette: Replaced flat coral with a more vibrant, gradient-based color scheme for a richer look.
- Visual Polish: Blocks now have softer edges, subtle shadows, and smarter spacing that makes the layout feel less crowded and more intentional.
- Minimalist UI Refinement: While still simple, V2 ditches the “prototype” look and edges closer to something you'd actually want to show off.
- Smoother Transitions: The clip-path reveal feels more fluid and natural.
- Fine-tuned Scroll Triggers: The animation timing better matches scroll behavior, creating a more immersive feel.
- Flex-wrap behaves more gracefully at different screen widths.
- Layout scales better on smaller devices — still not fully mobile-first, but much improved from V1’s rigid grid.
- Improved structure in both HTML and CSS.
- Less duplication, more clarity. Easier to expand or remix for future features.
- Clone the repository
git clone https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V1.git
Open the Project:
- Open
index.htmlin your browser
or - Use Live Server in VS Code.
Feel free to use, modify, or remix this project. No pressure.
Just give credit where credit’s due - sharing is caring. 😉
If 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.
Crafted with pixels and passion by
Davit Janezashvili
aka MasterJaneza – Creative Developer & Designer
If you're using dark mode, some visuals might not look as intended. For the best experience, switch to light mode.