Scroll-driven animation examples

Introduction

These are examples of scroll-driven animations, currently being prototyped in Firefox.

To see them in action, build this fork of mozilla-central.

The implementation is based on this work-in-progress specification.

Examples

• Basic example
• Examples from Apple's animation-timebase proposal (but using the JS API, since the CSS layer isn't implemented yet)
  • Example 1 ("Fade elements in when they are scrolled into view")
    • Need clarification on what scroll(elements) is supposed to do
  • Example 2 ("Spin an element while the page is between two points"), modified to use a scroll timeline
  • Modified to illustrate fillMode
  • Example 3 ("Draw a reading progress bar along the top of the page as the user scrolls")
  • Example 4 ("Animate translation and rotation separately")
    • This concerns animation-behaviour, which is out of scope for the current scroll-driven animations prototyping effort
• Layout cycles
  • Animation effect changes scroll position
  • Animation effect changes activation of scroll timeline
• Use cases from Google's AnimationWorklet proposal
• Parallax effect
  • Note: the use of OMTA for this type of animation requires bug 1100357
• Hidey-bar
• Spring timing function
  • This requires customizing the animation-timing-function, which is out of scope
• position: sticky
  • Note: Firefox supports position: sticky natively, so, while it's possible to emulate it using scroll-driven animations, it's not necessary
• Multiple scrollers scrolling in sync
  • This would require the ability to animate a scroll offset
  • However, the effect can be achieved if the minimap is not itself required to be scrollable
• Fling curves with custom physics
  • This would require animating a scroll offset and customizing the timing function