[scroll-animations] Rework use cases

[birtles]

I think we can improve the Use cases section in the following ways:

• The use cases should be labelled according to the desired effect. ScrollTimeline is an interface name, not a use case. A use case is something like, "Update navigation to highlight page section".
• It would be good to list up the real-world use cases along-side each one. Ultimately we will remove this, but when we present to the CSS WG we should demonstrate that these things really exist. Perhaps just write a "Note:" section listing the URLs.
• The order of the use cases should match the order of the spec, i.e.
  a. Triggering use cases
  b. Scroll timeline use cases
  c. Complex combinations of both
• We should illustrate using the CSS syntax (since most readers will be interested in that) followed by the JS-syntax (or the equivalent mapping) unless the use case is one that requires script.
  • Also, the code examples don't include the actual animation. We should include that rather than calling getAnimations[0].
• The first use case is unclear: does the heading fade gradually as you scroll? That seems odd. That feels more like a triggering use case.
• In fact, all the use cases seem a bit too abstract. Perhaps we can take a real-world example and just change it a little bit to be less-specific whilst still being real-world.
• The diagrams look good but, if possible, we should draw them using SVG so they can be edited (or alternatively check in the data file for the diagram so someone else can modify it).

[birtles]

Possible use case categories:

1. Scroll-triggered animations

It is common to trigger an animation to run when the scroll position reaches a certain point. For example, a navigation bar that changes highlight based on position.

TODO: Draw simple example; show CSS syntax, JS syntax

Another common example is having the page layout update at certain points in the scroll such as having a full-screen navigation panel shrink to a navigation bar after the initial scroll (e.g. http://fantasy.co/work)

TODO: Draw simple example; show CSS syntax, JS syntax

Real-world examples:

• https://info.internet.org/en/
• http://www.nurturedigital.com/work/pfister-react
• http://fantasy.co/work
• https://www.pumperlgsund-bio.de/de/
• http://us.rimmellondon.com/ (Perhaps This example uses scroll snap)
• http://tomerlerner.com/web/scroll/index.html#top (dito)
• http://graphicnovel-hybrid4.peugeot.com/start.html (AutoPlay)

In other cases the animation plays continually within a certain scroll range and stops immediately outside that range.

TODO: Simple example with CSS/JS

Real-world examples:

• http://www.kabu-kitamura.com/colon/en/

In other cases, the animation stops playing once the scroll position leaves a certain range but continues the current iteration.

TODO: Simple example with CSS/JS

Real-world examples:

• http://www.dementialab.org/ (time-base animation is made by Flash!)
• http://www.dementialab.org/conclusion/ (time-base animation is made by Flash!)
• http://www.cabletv.com/the-walking-dead (Last slides)
• https://scrollrevealjs.org/
• https://ihatetomatoes.net/demos/one-page-scroll-animations/
• http://www.beoplay.com/products/beoplayh5#magnetic

Multiple scroll-ranges?

Real-world examples:

• http://www.exsus.com/highway-one-roadtrip (some animation related with wall clock)
• http://neomam.com/interactive/13reasons/ (Dit)
• http://pitchfork.com/features/cover-story/reader/savages/
• http://www.soleilnoir.net/believein/#/end

2. Scroll-triggered style changes

TODO: Simple example with CSS/JS

Real-world examples:
http://unformedbuilding.com/articles/fixed-nav-with-jquery/

3. Scroll-linked animations

Another common effect is to use the scroll position to control the progress of an animation. For example, the scroll position might be used to control the zoom or color of an element.

TODO: Simple example with CSS/JS

Another example is a progress-bar that tracks scroll position such as a horizontal scroll-bar in the navigation bar that indicates the readers' position in a long article.

Real-world examples:

• http://alfredservice.com/ (controls animation progress, even movie progress)
• http://www.flatvsrealism.com
• http://makeyourmoneymatter.org/
• http://www.dementialab.org/discovery-lab/
• http://lostworldsfairs.com/atlantis/
• http://everylastdrop.co.uk/
• http://www.madwell.com/work
• http://www.fannabee.com/
• http://www.culturalsolutions.co.uk/
• http://jason-kenny.com/
• http://lamoulade.com/#!/home
• http://www.nytimes.com/projects/2013/tomato-can-blues/?hp
• http://www.unfold.no/
• http://www.arnoldclark.com/challenge/
• http://cyclemon.com/
• http://www.bbc.co.uk/news/special/2014/newsspec_7617/index.html
• http://johnpeelarchive.com/joe-boyd/#TOOTS
• http://nasaprospect.com/
• http://allout.org/en/
• https://www.washingtonpost.com/graphics/sports/olympics/scale-of-the-olympics/?%3Ftid%3D=sm_pg&%3Ftid%3D=sm_pg (scroll → zoom)
• https://www.invisionapp.com/product-design-industry-report-2016

4. Combination scroll and time-based animations

In still other cases, an animation might follow the scroll-position up to a certain threshold point but beyond that point, it may play to completion regardless of scroll position.

TODO: Some sort of pull-to-refresh example with JS

Real-world examples:

• http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
• http://www.gestrandete-wale.info/
• http://cuberto.com/

[mantaroh]

Thanks @birtles

I wrote the use case again, and changed the diagram to the SVG.
Could you please confirm this document?

(I'm going to remove the unnecessary information from SVG images)

[birtles]

I've made a few tweaks to the first use case but it's going to take a bit longer. I'll finish it off tomorrow. You can use SVGO for cleaning up the SVG.

[stephenmcgruer]

As per WICG/scroll-animations#22 (comment), we should include an example which uses block/inline + start/end scroll offset + writing-mode to make the interaction of those clearer.

[JayGeorge]

Would it be possible only to trigger scroll-based animations once?

This is an option in the scroll-trigger library 'AOS' (or 'Animate on Scroll') – https://github.com/michalsnik/aos#1-initialize-aos
– See the 'once' option.

The use case would be: Sometimes, I would like to scroll back up a page and re-read content without having it 'introduced' a second time with animation. For me, this is like a halfway house between some animation but not too much.

[fantasai]

@JayGeorge Filed your comment into its own issue at #7478