ScrollTimeline and ViewTimeline are an extension to the Web Animations spec which allow developers to use the position of a scroller or the position of an element within a scroller as an input 'time' rather than the default monotonic clock time. This enables fast scroll-based animations, such as a shrinking navigation bar, without requiring user script execution. They can be declared and instantiated both via CSS and Javascript used in CSS animations and Web Animations.
Scroll-driven animations are a common UX pattern on the web. We are proposing a new API that works in conjunction with existing Web Animations and CSS Animations APIs to enable declarative scroll driven animations to improve their smoothness and ergonomics. In Web Animations, an AnimationTimeline is the source of time progress that drives the animations. ScrollTimeline and ViewTimeline are new timelines whose function is to translate “changes in scroll position” of an element into “changes in time”. This allows animations to be driven by scrolling as opposed to by wall clock thus taking advantage of all existing animation machinery on the web.
Samples: https://scroll-driven-animations.style
Explainers: https://github.com/w3c/csswg-drafts/blob/main/scroll-animations-1/EXPLAINER.md