Introduction
Flat static webpages are not very exciting. Users expect content to come alive when scrolling. Explore some examples of how ScrollTimeline can make this happen
It's simple to write a header parallax and let the element based start and end constraints determine when the effect should start / end. This makes it easier to embed within complex sites without needing to track resizes.
Reveal animations
Zoom out for context!
This next effect shows a zoom out as the image crosses the viewport, revealing more content as the user continues to scroll.
And the effect can be seen below:
Panoramas
Similarly scroll linked effects are often used to reveal wide panorama shots that would otherwise require manual panning or otherwise be too small to show in context.
Simply include the large image in the content and animate from one background position to the other.
Before and after
Sometimes you want to show how something has changed. In these cases a wipe during the scroll can illustrate a transformation.
Conclusions
Hopefully all of these demos help to illustrate the power of ScrollTimeline animations on the web. The specification is under active development and this polyfill serves to help show what makes sense and doesn't.