Core Concepts view() and ViewTimeline Unleash the power of Scroll-Driven Animations (310) (Дата оригинальной публикации:

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 → Demo: Image Reveal (CSS) → Demo: Image Reveal (JS) → Check out more Scroll-Driven Animations Demos → Watch more Unleash the Power of Scroll-Driven Animations → Subscribe to Chrome for Developers → #CSS #ScrollDrivenAnimations #Animation #chrome Speaker: Bramus Van Damme