CSS-Only Scroll-Driven Animation and Other Impossible Things

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?