https://github.com/masterjaneza/scrolling-animation---v2
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.
https://github.com/masterjaneza/scrolling-animation---v2
animations css-animations css3 html5 modern modern-ui responsive responsive-design scroll scrolling v2
Last synced: 5 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/masterjaneza/scrolling-animation---v2
- Owner: masterjaneza
- Created: 2025-05-18T05:35:28.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-11T11:22:05.000Z (about 1 year ago)
- Last Synced: 2025-06-28T18:12:20.406Z (about 1 year ago)
- Topics: animations, css-animations, css3, html5, modern, modern-ui, responsive, responsive-design, scroll, scrolling, v2
- Language: CSS
- Homepage: https://scrolling-animation-v2.vercel.app
- Size: 57.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Scrolling Animation | V2
Welcome 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.
Still HTML + CSS. Still lightweight. But now it’s got style.
---
## 🚀 What It Does
- 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.
---
## 🔧 Improvements from V1
V1 was all grit, no glam, purely functional with basic layout and animation. **V2 brings the glow-up**:
### 🎨 Design & Aesthetics
- **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.
### 💨 Animation Enhancements
- **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.
### 📱 Responsive Layout
- 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.
### 🧼 Cleaner Code
- Improved structure in both HTML and CSS.
- Less duplication, more clarity. Easier to expand or remix for future features.
---
---
## ⚙️ Setup & Installation
1. **Clone the repository**
```bash
git clone https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V1.git
**Open the Project:**
- Open `index.html` in your browser
**or**
- Use **Live Server** in VS Code.
---
---
---
## 🧪 License
Feel free to use, modify, or remix this project. No pressure.
Just give credit where credit’s due - sharing is caring. 😉
---
## 🌟 Support the Project
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.
---
## ✍️ Credits
Crafted with pixels and passion by
**Davit Janezashvili**
_aka MasterJaneza – Creative Developer & Designer_
---
## ⚠️ Note
If you're using dark mode, some visuals might not look as intended. For the best experience, switch to light mode.
---