Wait, you can’t do scroll-driven animation with just CSS, right? Bramus will show us that not only is it possible, but there’s even more that CSS can do these days.


Upcoming episodes:
https://lwj.dev/schedule

Links & Resources:


- https://twitter.com/bramus
- https://www.bram.us/
- https://scroll-driven-animations.style/
- https://codepen.io/jlengstorf/pen/BavGKjv
- https://scroll-driven-animations.style/tools/view-timeline/ranges/#range-start-name=cover&range-start-percentage=0&range-end-name=cover&range-end-percentage=100&view-timeline-axis=block&view-timeline-inset=0&subject-size=smaller&subject-animation=reveal&interactivity=clicktodrag&show-areas=yes&show-fromto=yes&show-labels=yes
- https://chromewebstore.google.com/detail/scroll-driven-animations/ojihehfngalmpghicjgbfdmloiifhoce?pli=1
- https://codepen.io/jlengstorf/pen/mdaQPjv
- https://codepen.io/jlengstorf/pen/LYMXZEg
- https://kizu.dev/
- https://www.learnwithjason.dev/schedule/

Watch future episodes live at https://twitch.tv/jlengstorf

This episode was sponsored by:
- Netlify (https://lwj.dev/netlify)
- Vets Who Code (https://lwj.dev/vetswhocode)

Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/)


00:00:00 - Welcome
00:01:15 - Who is Bramus?
00:02:47 - How deep can you go with CSS?
00:06:55 - What are the most exciting parts of CSS?
00:12:00 - What is a scroll-driven animation?
00:20:10 - Example of scroll driven animations
00:26:45 - Using Carousel step indicator
00:33:23 - Getting started with scroll-driven animation on CodePen
00:41:47 - Using a calc function to animate smoother
00:44:32 - Adding a fade out
00:46:05 - What is the fill mode in animation?
00:48:58 - DevTools extension
00:55:46 - Building a cover card to fixed header animation
01:15:14 - Scrolling sections in the opposite direction
01:27:28 - Where can I learn more about scroll-driven animations with CSS?

Alejandro Bar Acedo

Amazon

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

Scroll-driven animations allow elements to animate based on the user's scrolling behavior. In this post, Bramus demonstrates how to create a fade-in effect on scroll and a cover card effect using CSS.

CSS-Only Scroll-Driven Animation and Other Impossible Things