Een casestudy over de prestaties van scrollgestuurde animaties

Yuriko Hirota
Yuriko Hirota

Wat is er nieuw met scrollgestuurde animaties?

Scrollgestuurde 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 scrollgestuurde animaties te maken het reageren op de scrollgebeurtenis in de hoofdthread. Dit veroorzaakte twee grote problemen:

  • Het scrollen wordt uitgevoerd op een aparte thread en levert daarom scrollgebeurtenissen asynchroon op.
  • Hoofdthreadanimaties zijn onderhevig aan jank .

Dit maakt het creëren van performante scroll-gestuurde animaties die synchroon zijn met scrollen onmogelijk of zeer moeilijk.

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

Browserondersteuning

  • Chroom: 115.
  • Rand: 115.
  • Firefox: achter een vlag.
  • Safari: niet ondersteund.

Bron

Dit artikel vergelijkt de nieuwe aanpak met de klassieke JavaScript-techniek om te laten zien hoe eenvoudig en soepel scrollgestuurde animaties kunnen zijn met de nieuwe API.

De scrollgestuurde animaties CSS API versus klassiek JavaScript

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

Het document reageert elke keer dat de scroll -gebeurtenis plaatsvindt, om te berekenen naar welk percentage van de scrollHeight de gebruiker heeft 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 behulp van 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 animatie-tijdlijn CSS-functie converteert automatisch een positie in een scrollbereik naar een percentage van de voortgang, waardoor al het zware werk wordt gedaan.

Nu is hier het interessante gedeelte: laten we zeggen dat je een superzware berekening hebt geïmplementeerd op beide versies van de website, die de meeste bronnen van de hoofdthread zou opslokken.

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 had verwacht, wordt de klassieke JavaScript-versie slordig en traag vanwege het knooppunt van de hoofdthreadbronnen. Aan de andere kant wordt de CSS-versie volledig niet beïnvloed door het zware JavaScript-werk en kan hij reageren op de scroll-interacties van de gebruiker.

Het CPU-gebruik is compleet anders in DevTools, zoals weergegeven in de volgende schermafbeeldingen.

Hoofdonderwerpvergelijking.

De volgende demo toont een toepassing van scrollgestuurde animatie gemaakt door CyberAgent . Je ziet dat de foto vervaagt terwijl je scrollt.

Nieuwe scrollgestuurde animaties JavaScript API versus klassiek JavaScript

Het voordeel van de nieuwe API beperkt zich niet alleen tot CSS. U kunt ook zijdezachte, scrollgestuurde animaties maken met JavaScript. Kijk eens naar 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,
    }),
  }
);

Hierdoor kunt u dezelfde voortgangsbalkanimatie maken als in de vorige CSS-demo, met alleen JavaScript. De onderliggende technologie is hetzelfde als de CSS-versie. De API probeert zo min mogelijk hoofdthreadbronnen te gebruiken, waardoor de animaties veel vloeiender zijn in vergelijking met de klassieke JavaScript-aanpak.

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

Meer demo's en bronnen

Je kunt de verschillende implementaties van scrollgestuurde animatie bekijken via deze demosite , waar je demo's kunt vergelijken met behulp van deze nieuwe API's van CSS en JavaScript.

Als je meer wilt weten over de nieuwe scroll-gestuurde animaties, bekijk dan dit artikel en de I/O 2023-talk !