In this fourth episode of “Unleash the power of Scroll-Driven Animations” show host Bramus shows how to attach a Scroll-Driven Animation to only a part of a Scroll Timeline/View Timeline.
In CSS this can be done using the animation-range property, and in JavaScript using the rangeStart + rangeEnd animation options.
Use the interactive View Timeline Ranges Visualizer to play with these ranges yourself.
Chapters:
0:00 – Introducing animation-range
0:55 – Scroll Timeline ranges
4:03 – View Timeline ranges
6:47 – Using calculations in the ranges
7:17 – Ranges for taller than scrollport subjects
8:41 – Mixing and matching ranges
9:55 – Ranges in JavaScript
10:47 – Outro
Resources:
Tool: Scroll Timeline Progress Visualization → https://goo.gle/3y1YLtH
Demo: Cover Card to Fixed Header → https://goo.gle/3xQthXz
Article: The gotcha with animating custom properties → https://goo.gle/49TzuiW
Tool: View Timeline Progress Visualization → https://goo.gle/4b87NDQ
Tool: View Timeline Ranges Visualizer → https://goo.gle/4aaSl9n
Demo: Appearing images with fixed range → https://goo.gle/3xVKCOZ
Demo: Fly-in Fly-out Contact List → https://goo.gle/3JzD5rJ
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