Scroll Velocity Detection | Unleash the power of Scroll-Driven Animations (9/10)

In this ninth episode of “Unleash the Power of Scroll-Driven Animations”, show host Bramus goes full experimental and uses Scroll-Driven Animations to detect the active scroll speed and the directionality of scroll. Detecting this allows you to style an element based on whether the user is scrolling (or not scrolling), the direction they are scrolling in, and the speed they are scrolling with … and this all using only CSS. Chapters: 0:00 - Intro 0:47 - Warning: this is a hack 1:02 - Step 0: Two Custom Properties 1:44 - Step 1: Delaying one of the Custom Properties 2:21 - Step 2: Calculating the Velocity 3:40 - Step 3: Calculating the Direction and Speed 4:46 - Demo: Tilted Boxes 5:18 - Demo: Motion Blur Scroll 5:52 - Using Style Queries 6:15 - Detecting more scroll states 7:59 - Outro Resources: Article: Style an element based on the active Scroll Direction and Scroll Speed → https://goo.gle/3JxUAsm Demo: BADASS → https://goo.gle/3UKQweR Article: @property → https://goo.gle/at-property Demo: Scroll Velocity POC: Step 0 → https://goo.gle/3y4EWSw Demo: Scroll Velocity POC: Step 1 → https://goo.gle/49VgHUl Demo: Scroll Velocity POC: Step 2 → https://goo.gle/4bf9JL4 Demo: Scroll Velocity POC: Step 3 → https://goo.gle/49UudHF Article: abs() and sign() polyfill → https://goo.gle/abs-sign-polyfill Demo: Tilted Boxes → https://goo.gle/3JDYik0 Demo: Motion Blur Scrolling → https://goo.gle/3UCzCyV Article: Style Queries → https://goo.gle/style-queries Demo: Moving Bars → https://goo.gle/3UxnmPY Demo: Chicky Scroll → https://goo.gle/4aRR3kG Demo: LERP Reading Indicator → https://goo.gle/3WhUkoJ Check out more Scroll-Driven Animations Demos → https://goo.gle/scroll-driven-animations-demos Watch more Unleash the Power of Scroll-Driven Animations → https://goo.gle/SDA Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs #CSS #ScrollDrivenAnimations #Animation #chrome Speaker: Bramus Van Damme