Deze pagina is vertaald door de Cloud Translation API.

Een casestudy over de prestaties van scrollgestuurde animaties

Yuriko Hirota

Wat is er nieuw aan scroll-gestuurde animaties?

Scroll-gestuurde animaties zijn een manier om interactiviteit en visuele aantrekkingskracht toe te voegen aan uw website of webapplicatie. Ze worden 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 op de hoofdthread. Dit leidde tot twee grote problemen:

Het scrollen gebeurt in een aparte thread en levert daarom scrollgebeurtenissen asynchroon af.
De animaties in de hoofdthread kunnen haperingen vertonen .

Hierdoor is het onmogelijk of zeer moeilijk om vloeiende, scrollgestuurde animaties te creëren die synchroon lopen met het scrollen.

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

Browser Support

Source

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

Scrollgestuurde animaties met de CSS API versus klassieke JavaScript.

De volgende voortgangsbalk is gemaakt met behulp van klassieke JavaScript-technieken.

Het document reageert telkens wanneer de scroll plaatsvindt door te berekenen hoeveel procent van de scrollHeight de gebruiker heeft bereikt.

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 laat dezelfde voortgangsbalk zien met behulp van de nieuwe API en 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 een positie binnen een scrollbereik automatisch om in een voortgangspercentage, waardoor al het zware werk wordt gedaan.

En nu komt het interessante gedeelte: stel dat je op beide versies van de website een extreem zware berekening hebt geïmplementeerd die het grootste deel van de resources 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 wellicht al verwacht, wordt de klassieke JavaScript-versie haperend en traag vanwege de toewijzing van resources aan de hoofdthread. De CSS-versie daarentegen ondervindt geen hinder van de zware JavaScript-belasting en reageert direct op scrollbewegingen van de gebruiker.

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

Hoofdthreadvergelijking.

De volgende demo toont een toepassing van scroll-gestuurde animatie, gemaakt door CyberAgent . Je kunt zien dat de foto geleidelijk in beeld komt terwijl je scrollt.

Nieuwe scroll-gestuurde animaties in de JavaScript API versus klassieke JavaScript

De voordelen van de nieuwe API beperken zich niet alleen tot CSS. Je kunt nu ook vloeiende, scroll-gestuurde 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 als in de vorige CSS-demo, maar dan met alleen JavaScript. De onderliggende technologie is hetzelfde als bij de CSS-versie. De API probeert zo min mogelijk resources van de hoofdthread te gebruiken, waardoor de animaties veel vloeiender zijn in vergelijking met de klassieke JavaScript-aanpak.

Deze nieuwe API werkt bovendien 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 scroll-gestuurde animatie bekijken via deze demosite , waar je demo's kunt vergelijken die gebruikmaken van deze nieuwe API's voor CSS en JavaScript.

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