In this third episode of “Unleash the power of Scroll-Driven Animations” show host Bramus digs into the View Timeline, a type of animation timeline that tracks a subject’s relative position within its scroller’s scrollport.
In CSS you can create this type of timeline with the view() function and in JavaScript by creating a new ViewTimeline instance.
When connected to a CSS or WAAPI animation, this type of timeline creates a Scroll-Driven Animation. There’s some options to configure, which all get covered in this episode.
Chapters:
0:00 – Intro
0:37 – What is a scroll container and what is a scrollport?
1:30 – The View Timeline concept
2:45 – The view() function
4:15 – The ViewTimeline class
5:16 – Outro
Resources:
Tool: View Timeline Progress Visualization → https://goo.gle/4b87NDQ
Demo: Image Reveal (CSS) → https://goo.gle/4dgytUP
Demo: Image Reveal (JS) → https://goo.gle/3JBPxah
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