There are some scroll animations that are possible in CSS without any JavaScript at all. Just look at the chapter on the Scroll Indicator, which is clearly CSS magic. But we can do a lot of scroll animation work directly in CSS with just one little bit of information provided by JavaScript: how far the page has scrolled.

Thermo Fisher Scientific

Tom Nijhof

Blender

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn how to create scroll animations using CSS without JavaScript. Discover the trick to pause an animation based on the scroll position and adjust the animation duration.

Scroll Animation - CSS-Tricks

<p>Scroll Animation - CSS-Tricks <a href="https://app.daily.dev/cssninja" data-mention-id="0buE6tSkTCcoL4fxBnKEG" data-mention-username="cssninja">@cssninja</a></p>


<p>WOW! this is so cool! I really think that js scroll animations are quite complicated, this makes it so much more easy! It also helps me integrate them into css challenges!</p>
