- Scroll-linked animations
Scroll position controls progress:
- 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
- Combination scroll and time-based animations
- http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
- http://www.gestrandete-wale.info/
- http://cuberto.com/
See EXPLAINER for an explanation of why theses usecases are deferring in the first version of this specification. The design space for triggering animations is still open. We welcome input on this subject for next revision of this specification.
- Scroll-triggered animations
Trigger an animation based on scroll position:
- 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)
Play an animation continually within a certain scroll range:
Animation stops playing once the scroll position leaves a certain range but continues to the end of the current iteration:
- 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:
- 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
- Scroll-triggered style changes