123 of 300

Heroes 07

Zero-JS cinema

Scroll, and the headline rises letter by letter, a route draws itself and a chip rides along it while it counts 24 weeks. No script runs. A browser without scroll timelines shows the finished state.

CSS scroll-driven animations, @property, offset-path and a linear() spring

  • No scriptThe scroll position of the page is the timeline. A registered custom property counts the weeks, and the chip moves along a motion path.
  • FallbackWhere scroll timelines are missing, the finished state is the default: the page is one screen high and everything is drawn.