Scroll-driven animations case studies

Swetha Gopalakrishnan

Saurabh Rajpal

Scroll-driven animations are a common UX pattern on the web. A scroll-driven animation is 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. Examples of this are effects such as parallax background images or reading indicators which move as you scroll.

Developers have typically created scroll-driven animations by using JavaScript to respond to scroll events on the main thread. This makes it hard to create performant scroll-driven animations that are in sync with scrolling, due to scroll events being delivered asynchronously, and often leads to jank due to being on the main thread.

However, as part of the new CSS and UI features landing in browsers, you can now create declarative scroll-driven animations. With Scroll Timelines and View Timelines, new concepts that integrate with the existing Web Animations API (WAAPI) and CSS Animations API, you can now have silky smooth scroll-driven animations running off the main thread, with just a few lines of code. In this case study, discover how Tokopedia, redBus, and Policybazaar are already benefiting from this new feature.

Tokopedia