Scroll-linked Animations

Speaking of scrolling, an unofficial draft proposal has been authored for “scroll-linked animations”. The proposal defines an API for creating animations and effects that respond to scroll-based interactions. It covers several common patterns, such as a navigation bar shrinking effect, a navigation highlight effect, and – my favourite – a reading progress bar:

@keyframes progress {
to { width: 100%; }
}
#progress {
width: 0px;
height: 30px;
background: red;
animation: progress 1s linear;
animation-timeline: scroll(element(#body));
}

So simple!

Chris Coyier at CSS-Tricks writes:

I love it when web standards get involved because it sees authors like us trying to pull off certain design effects and wants to (presumably) help make it easier and more performant.

Read the draft proposal or follow the progress on GitHub.