Кейс по производительности анимации с прокруткой

Yuriko Hirota

Что нового в анимации, управляемой прокруткой?

Scroll-driven animations are a way to add interactivity and visual interest to your website or web application, triggered by the user's scroll position. This can be a great way to keep users engaged and make your website more visually appealing.

Раньше единственным способом создания анимации, управляемой прокруткой, было реагирование на событие прокрутки в основном потоке. Это вызывало две основные проблемы:

• Прокрутка выполняется в отдельном потоке, поэтому события прокрутки передаются асинхронно.
• Анимация в основном потоке подвержена рывкам .

Это делает создание высокопроизводительных анимаций, синхронизированных с прокруткой, невозможным или очень сложным.

We are now introducing a new set of APIs to support scroll-driven animations, which you can use from CSS or JavaScript. The API tries to use as few main thread resources as possible, making scroll-driven animations far easier to implement, and also much smoother. The scroll-driven animations API is currently supported in the following browsers:

В этой статье новый подход сравнивается с классической техникой JavaScript, чтобы показать, насколько легко и плавно можно создавать анимации, управляемые прокруткой, с помощью нового API.

Анимация, управляемая прокруткой, с помощью CSS API против классического JavaScript

Приведенный ниже пример индикатора выполнения создан с использованием классовых методов JavaScript.

При каждом событии scroll документ вычисляет, до какого процента от scrollHeight пользователь прокрутил страницу.

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 + "%";
})

В следующем примере показана та же самая полоса прогресса, созданная с использованием нового API и CSS.

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

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

Новая функция CSS animation-timeline автоматически преобразует позицию в диапазоне прокрутки в процент прогресса, выполняя таким образом всю основную работу.

А вот что интересно — предположим, вы внедрили в обе версии веб-сайта очень ресурсоемкое вычисление, которое поглотило бы большую часть ресурсов основного потока.

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 have expected, the classic JavaScript version becomes janky and sluggish due to the main thread resources junction. On the other hand, the CSS version is completely unaffected by the heavy JavaScript work and can respond to the user's scroll interactions.

Использование ЦП в инструментах разработчика отображается совершенно иначе, как показано на следующих скриншотах.

В следующем примере демонстрируется применение анимации, управляемой прокруткой, созданной с помощью CyberAgent . Вы можете увидеть, что фотография плавно появляется по мере прокрутки.

Новые анимации, управляемые прокруткой, в сравнении с классическим JavaScript.

Преимущества нового API не ограничиваются только CSS. Вы также можете создавать плавные анимации при прокрутке с помощью JavaScript. Взгляните на следующий пример:

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 enables you to create the same progress bar animation shown in the previous CSS demo using just JavaScript. The underlying technology is the same as the CSS version. The API tries to use as few main thread resources as possible, making the animations far smoother when compared to the classic JavaScript approach.

Кроме того, этот новый API работает совместно с существующими API веб-анимаций (WAAPI) и API CSS-анимаций , что позволяет создавать декларативные анимации, управляемые прокруткой.

Больше демонстраций и ресурсов

Вы можете ознакомиться с различными вариантами реализации анимации, управляемой прокруткой, на этом демонстрационном сайте , где можно сравнить демонстрационные примеры, использующие новые API из CSS и JavaScript.

Если вас интересует более подробная информация о новых анимациях, управляемых прокруткой, ознакомьтесь с этой статьей и докладом на конференции I/O 2023 !