css-animations

2 articles

Smooth scroll-driven animation effects on a modern web page

Advanced CSS Animations: Scroll-Driven Effects Without JavaScript

A hands-on guide to creating performant scroll-driven animations using native CSS scroll timelines, view transitions, and the animation-timeline property without any JavaScript dependencies.

Oct 26, 2024·5 min read

Webpage demonstrating scroll-driven CSS animations with elements fading in, parallax backgrounds, and a progress bar advancing as the user scrolls

Frontend

CSS Scroll-Driven Animations: Beyond JavaScript Scroll Handlers

Build performant scroll-linked animations using CSS scroll-driven animations API with practical examples of scroll progress timelines, view timelines, parallax effects, and sticky header transforms that run entirely off the main thread.

Apr 30, 2024·4 min read

View all articles