Animation performance study based on page scroll

This article is a translation of the original article “A case study on scroll-driven animations performance“.

I also run a telegram channelFrontend in a navy way”, where I talk about interesting things from the world of interface development.

What’s new in scroll based animation?

Scroll based animation is a way to add interactivity and visual interest to your site or web application that fires based on the user’s scroll position. This is a great way to retain users and make your site more attractive.

Previously, the only way to create an animation based on page scroll was to respond to a scroll event on the main thread. This led to two main problems:

Scrolling is done on a separate thread, so scroll events are dispatched asynchronously.
Main thread animations susceptible to interference.

This makes it impossible or very difficult to create a performance animation that is in sync with the scroll.

We present a new API set to support scroll-based animation that can be used from CSS or JavaScript. The API tries to use as few main thread resources as possible, which greatly simplifies the implementation of scrolling animation, and also makes it smoother. The Animation API is currently supported in the following browsers:

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#browser_compatibility

This article compares the new approach to classic JavaScript techniques to show how easy and smooth animation can be with the new API.

CSS API vs Classic JavaScript

The following example of a progress bar is built using JavaScript tricks.

The document responds to every event scrollcalculating how many percent of the value scrollHeight scrolled by the user.

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

The following demo shows the same progress bar using the new API with CSS.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

New CSS function animation-timeline automatically converts the position in the scroll range to a progress percentage, thus doing all the hard work.

Now the most interesting thing – let’s say you implemented a super-heavy calculation on both versions of the site, which would eat up most of the resources of the main thread.

function someHeavyJS() {
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

As you might expect, the classic JavaScript version becomes sloppy and sluggish due to overloading the resources of the main thread. On the other hand, the CSS version is completely unaffected by the heavy work of JavaScript and can respond to user actions while scrolling.

CodePen with classic JS implementation

CodePen using the new API (Chrome 115+)

The CPU usage in DevTools is completely different, as you can see from the following screenshots.

The demo below shows the application of a scroll-based animation created by CyberAgent. You may notice that the photo disappears as you scroll.

Demo

New JavaScript API for scrolling animations compared to the classic JavaScript implementation

The benefits of the new API are not limited to just CSS. You can also create smooth scroll animations with JavaScript. Take a look at the following example:

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

This allows you to create the same progress bar animation as in the previous CSS example using only JavaScript. It is based on the same technology as in the CSS version. The API tries to use as few main thread resources as possible, which makes the animation much smoother than the classic JavaScript approach.

In addition, the new API works in conjunction with existing ones. Web Animations API (WAAPI) And CSS Animations APIallowing you to implement visual animation based on scrolling.

CodePen demo with classic JS implementation

CodePen demo using the new JS API