Een casestudy over de prestaties van scrollgestuurde animaties

Yuriko Hirota

Wat is er nieuw met scroll-animaties?

Scroll-gestuurde animaties zijn een manier om interactiviteit en visuele interesse toe te voegen aan uw website of webapplicatie, geactiveerd door de scrollpositie van de gebruiker. Dit kan een geweldige manier zijn om gebruikers betrokken te houden en uw website visueel aantrekkelijker te maken.

In het verleden was de enige manier om scroll-gestuurde animaties te maken, te reageren op de scroll-gebeurtenis in de hoofdthread. Dit veroorzaakte twee grote problemen:

• Scrollen wordt uitgevoerd op een aparte thread en levert scrollgebeurtenissen daarom asynchroon af.
• Animaties van hoofdthreads zijn onderhevig aan jank .

Hierdoor is het onmogelijk of zeer moeilijk om goed presterende scroll-gestuurde animaties te maken die synchroon lopen met het scrollen.

We introduceren nu een nieuwe set API's ter ondersteuning van scroll-gestuurde animaties, die u vanuit CSS of JavaScript kunt gebruiken. De API probeert zo min mogelijk resources van de hoofdthread te gebruiken, waardoor scroll-gestuurde animaties veel eenvoudiger te implementeren en ook veel vloeiender zijn. De API voor scroll-gestuurde animaties wordt momenteel ondersteund in de volgende browsers:

In dit artikel vergelijken we de nieuwe aanpak met de klassieke JavaScript-techniek om te laten zien hoe eenvoudig en vloeiend scroll-animaties kunnen zijn met de nieuwe API.

De scroll-gestuurde animaties CSS API versus klassieke JavaScript

De volgende voorbeeldvoortgangsbalk is gebouwd met behulp van klasse-JavaScript-technieken.

Het document reageert elke keer dat de scroll plaatsvindt door te berekenen naar welk percentage van de scrollHeight de gebruiker is gescrold.

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

De volgende demo toont dezelfde voortgangsbalk met de nieuwe API met CSS.

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

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

De nieuwe CSS-functie voor animatietijdlijnen zet automatisch een positie in een scrollbereik om in een percentage van de voortgang en doet dus al het zware werk.

En nu komt het interessante gedeelte: stel dat je een superzware berekening hebt geïmplementeerd op beide versies van de website, die het grootste deel van de bronnen van de hoofdthread in beslag zou nemen.

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

Zoals je misschien al verwacht had, wordt de klassieke JavaScript-versie log en traag door de verbinding met de bronnen van de hoofdthread. De CSS-versie daarentegen wordt volledig onaangetast door de zware JavaScript-bewerking en kan wel reageren op de scroll-interacties van de gebruiker.

Het CPU-gebruik is in DevTools compleet anders, zoals te zien is in de onderstaande schermafbeeldingen.

De volgende demo toont een toepassing van scroll-gestuurde animatie, gemaakt door CyberAgent . U kunt zien dat de foto vervaagt terwijl u scrollt.

Nieuwe scroll-gestuurde animaties JavaScript API versus klassieke JavaScript

Het voordeel van de nieuwe API beperkt zich niet alleen tot CSS. Je kunt ook zijdezachte scroll-animaties maken met JavaScript. Bekijk het volgende voorbeeld:

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,
    }),
  }
);

Hiermee kunt u dezelfde voortgangsbalkanimatie maken die in de vorige CSS-demo werd getoond, met alleen JavaScript. De onderliggende technologie is dezelfde als die van de CSS-versie. De API probeert zo min mogelijk bronnen van de hoofdthread te gebruiken, waardoor de animaties veel vloeiender zijn in vergelijking met de klassieke JavaScript-aanpak.

Bovendien werkt deze nieuwe API samen met de bestaande Web Animations API (WAAPI) en CSS Animations API om declaratieve, scrollgestuurde animaties mogelijk te maken.

Meer demo's en bronnen

U kunt de verschillende implementaties van scroll-aangedreven animatie bekijken via deze demosite , waar u demo's kunt vergelijken met behulp van deze nieuwe API's van CSS en JavaScript.

Als je meer wilt weten over de nieuwe scroll-aangedreven animaties, lees dan dit artikel en de I/O 2023-presentatie !