📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › CSS Mastery › Scroll-driven Animations

Scroll-driven Animations

6 min read
Scroll-driven animations link animation progress to scroll position using animation-timeline: view() or scroll(). Animate elements as they enter the viewport in pure CSS without any JavaScript scroll event listeners.

Scroll-Driven Animations

/* Pure CSS scroll animations (Chrome 115+) */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card {
    animation: fadeUp linear;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

No JavaScript needed! Elements animate as they enter the viewport.