Introducing "Unleash the power of Scroll-Driven Animations"

Bramus

We are proud to announce the release of "Unleash the Power of Scroll-Driven Animations", a 10-part video course to learn all about scroll-driven animations using CSS or JavaScript.

You can watch the series on YouTube. The first episode is embedded here.

Scroll-driven animations?

With scroll-driven animations you can take an existing CSS or WAAPI animation and animate it on scroll. Because of that, scroll-driven animations inherit all of the benefits these APIs bring. This includes hardware accelerated scroll-driven animations that are not subject to jank when the main thread gets blocked.

Scroll-driven animations are available in Chrome from Chrome 115 and are the perfect candidate for progressive enhancement.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

Watch the video series or read the documentation to learn more about scroll-driven animations.

The episodes

The course consists of 10 episodes and is split into two big parts: an explanation of the core concepts that make up scroll-driven animations, followed by a few practical applications.

  1. Episode 1: Introduction.
  2. Episode 2: Core Concepts: scroll() and ScrollTimeline.
  3. Episode 3: Core Concepts: view() and ViewTimeline.
  4. Episode 4: Core Concepts: Timeline ranges demystified.
  5. Episode 5: Core Concepts: Timeline Lookup and Named Timelines.
  6. Episode 6: Practical Application: Add Scroll Shadows to a Scroll Container.
  7. Episode 7: Practical Application: Animate Elements in Different Directions.
  8. Episode 8: Practical Application: Animate 3D Models and More on Scroll.
  9. Episode 9: Practical Application: Scroll Velocity Detection.
  10. Episode 10: Outro.

The episodes are best watched in order as they build on demos and techniques covered in earlier episodes. The demos and tools shown in each episode are available online and linked in the description.

More resources