Scroll-driven Animations

Scroll driven animations

Use chrome browser. It is a relatively new feature (in 2024) which means current browser support is not great.

Can I use?

Pre-requisite - CSS animations Read about animation

animation-timeline

Create an anonymous scroller using { animation-timeline: scroll() } and add to the element being animated.

default options for scroll(<scroller> <axis>) - scroll(nearest block)

Scroll parameters

Scroll here

scroll v/s view

scroll-timeline - tracks the scroll progress in the scroll container. Here the progress bar at the top is using scroll-timeline.

Scroll timeline example

view-timeline - tracks the relative position of the subject within the scrollport. The cards are using view-timeline.

{ animation-timeline: view() } always tracks within the nearest scroller.

View timeline example

Attachment range

{ animation-range: contain 10% contain 90%; } - animation starts when the element is 10% in view and stops when it has crossed 80% of the scrollport.

Default is normal (cover 0% cover 100%)

Other options include cover, contain, entry, exit, entry-crossing, exit-crossing

Try it out

Scroll here

Named timeline

Name a scroll/view timeline using a custom identifier.

Examples in this page

html { scroll-timeline-name: --page-scroll; }

#card { view-timeline-name: --cards-element-scrolls-in-body; }

No Javascript

This static page is built with HTML and CSS and hosted on github pages. Check out the code

Javascript is not needed for styling a page or for animations. Nor do you need any framework or library.

(...if you really want to use JS here you can with Web Animations API WAAPI)