Animate Elements on Scroll With Scroll-Driven Animations
Coming to Chrome is a new set of APIs and concepts that work in conjunction with the existing Web Animations API (WAAPI) and CSS Animations API to enable declarative scroll-driven animations.
Integrating scroll-driven animations with two existing APIs, means that they benefit from the advantages of these APIs. That includes the ability to have these animations run off the main thread. Yes, read that correctly: you can now have silky smooth animations, driven by scroll, running off the main thread, with just a few lines of extra code.
To create an animation in CSS, define a set of keyframes using the
@keyframesat-rule.
By default, an animation attached to an element runs on the document timeline. Its origin time starts at 0 when the page loads, and starts ticking forwards as clock time progresses. This is the default animation timeline and, until now, was the only animation timeline you had access to.
The Scroll-driven Animations Specification defines two new types of timelines that you can use:
• Scroll Progress Timeline: a timeline that is linked to the scroll position of a scroll container along a particular axis.
• View Progress Timeline: a timeline that is linked to the relative position of a particular element within its scroll container.