Scroll-driven Animations A bunch of demos and tools to show off Scroll-driven Animations

# Introduction

Scroll-driven animations are a common UX pattern on the web. These are animations that are linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Think of interesting effects such as parallax background images or reading indicators which move as you scroll. A similar type of scroll-driven animation is an animation that is linked to an element's position within its scroll container. With it, for example, elements can fade-in as they come into view.

The classic way to achieve these kinds of effects is to respond to scroll events on the main thread. This makes creating performant scroll-driven animations that are in-sync with scrolling impossible or very difficult. Thanks to the Scroll-driven Animations specification, you now have access to new APIs and concepts that enable declarative scroll-driven animations that work in conjunction with the existing Web Animations API (WAAPI) and CSS Animations API.

By having scroll-driven animations integrate with these two existing APIs, scroll-driven animations can benefit from all advantages these APIs bring. That includes the ability to have these animations run off the main thread. Yes, read that correctly: you can now have silky smooth animations, driven by scroll, running off the main thread … and all that with just a few lines of extra code – What's not to like?!

👾 Demos 🔧 Tools 🍿 Free video course 🐞 DevTools Extension

# Demos

⚠️ Your browser does not support Scroll-Linked Animations. To cater for this, a polyfill has been loaded.

Use the ℹ️ icon on each demo page to know more about how that specific demo was created. Several demos come in multiple versions. To switch versions, hit the 🔀 icon.

Reading Progress Indicator

Show a progress bar at the top of the page that indicates how far down you have scrolled.

CSS version JS version

Reverse-Scrolling Columns

A center column that scrolls, surrounded by two columns that scroll in the opposite direction.

CSS version JS version

Cover Card to Fixed Header

Transform a full page cover card to a fixed header as you scroll down

CSS version JS version

Image Reveal Effects

Reveal Images as they enter the scrollport

CSS version JS version

Fly-in Fly-out Contact List

Translate and fade entries as they enter/exit a scroller.

CSS version JS version

Cover Flow

Recreation of a famous effect where you can flick through a list of album covers

CSS version JS version

Stacking Cards

A set of cards that stack as they overlap.

CSS version JS version

Horizontal Scroll Section

A horizontal strips scrolls by as you scroll vertically.

CSS version JS version

3D Shoe Explorer

Actual 3D-models of shoes, rotating as you scroll …

CSS version JS version

Shrinking Header + Shadow

Add a shadow to the page’s header after scrolling down a bit.

CSS version JS version

Scroll Shadows

Shadows to indicate a scroller is scrollable. The shadows go away as you scroll to the edge.

CSS version JS version

# Tools

Scroll Timeline Progress Visualizer

Go to tool

View Timeline Progress Visualizer

Go to tool

View Timeline Ranges Visualizer

Go to tool

scroll() parameters

Go to tool

# Watch a free video course

To learn all there is to know about Scroll-Driven Animations, check out this 10-part video course that covers everything from start to finish. Embedded below is the first episode:

This hands-on course is split up in two parts: one part covering the core concepts, followed by a second part that dissects some of the demos featured on this site.

Here’s the full list of episodes:

  1. Introduction | Unleash the power of Scroll-Driven Animations (1/10)
  2. Core Concepts: scroll() and ScrollTimeline | Unleash the power of Scroll-Driven Animations (2/10)
  3. Core Concepts: view() and ViewTimeline | Unleash the power of Scroll-Driven Animations (3/10)
  4. Core Concepts: Timeline Ranges Demystified | Unleash the power of Scroll-Driven Animations (4/10)
  5. Core Concepts: Timeline Lookup and Named TLs | Unleash the power of Scroll-Driven Animations (5/10)
  6. Add Scroll Shadows to a Scroll Container | Unleash the power of Scroll-Driven Animations (6/10)
  7. Animate Elements in Different Directions | Unleash the power of Scroll-Driven Animations (7/10)
  8. Animate 3D Models and More on Scroll | Unleash the power of Scroll-Driven Animations (8/10)
  9. Scroll Velocity Detection | Unleash the power of Scroll-Driven Animations (9/10)
  10. Outro | Unleash the power of Scroll-Driven Animations (10/10)

If you are more into reading, go check out the written documentation.

# Scroll-Driven Animations Debugger DevTools Extension

To visualize and debug Scroll-Driven Animations there is the Scroll-Driven Animations Debugger extension for Chrome DevTools. The video below demonstrates the extension in action on this very site.

Get the extension from the Chrome Web Store. File a bug in the repository.

# Links and Resources

🏠

About this website

This website contains a bunch of demos and tools to show off scroll-driven animations, a new web feature that allow you to drive animations by scroll. Each demo includes an infobox like this, detailing what the demo is about and how it works.

For more info in general, refer to the “Links and Resoures” section on this page.

This site is built by Bramus, Developer Relations Engineer for Google Chrome. The source code of this site is available via view-source as it’s all (handcrafted) HTML, CSS, and JS – There is no framework or build step. The work is licensed under the Apache License, Version 2.0