Исследование производительности анимации на основе скрола страницы

[edo1h]

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

серьёзно?

[qmzik]

Я думаю автор имел ввиду более обобщённо про анимации, а не про конкретный пример из статьи

[tima_tey]

Когда я прочёл заголовок, то подумал, что статья про параллакс-эффект, и что можно в основном потоке вычислять только процент, и передавать его в CSS в виде переменной а-ля...

// берём код из примера
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.body.style.setProperty('--scroll',scrolled);
})

#progress {
  background: red;
  width: calc(var(--scroll) * 1%); // если переменная пуста, он нам насчитает 0px
  height: 100px;
  position: fixed;
  transition: .3s; // если нужно прям анимировать
}

И тогда можно вообще дальше не трогать математику на стороне JS, и уже из анимируемых блоков смотреть в эту переменную