Een casestudy over de prestaties van scrollgestuurde animaties

Yuriko Hirota

Wat is er nieuw in scrollgestuurde animaties?

Scrollgestuurde animaties zijn een manier om interactiviteit en visuele interesse toe te voegen aan uw website of web-app. Ze worden geactiveerd door de scrollpositie van de gebruiker. Zo houdt u gebruikers betrokken en maakt u uw website visueel aantrekkelijker.

Vroeger kon je alleen door scrollen gestuurde animaties maken door te reageren op de scrollgebeurtenis in de hoofdthread. Dit veroorzaakte 2 grote problemen:

• Scrollen wordt uitgevoerd in een afzonderlijke thread en levert daarom scrollgebeurtenissen asynchroon.
• Animaties in de hoofdthread kunnen schokkerig zijn.

Hierdoor is het onmogelijk of erg moeilijk om goed presterende scrollgestuurde animaties te maken die synchroon lopen met scrollen.

We introduceren nu een nieuwe set API's ter ondersteuning van scrollgestuurde animaties, die je kunt gebruiken vanuit CSS of JavaScript. De API probeert zo min mogelijk bronnen van de hoofdthread te gebruiken, waardoor door scrollen gestuurde animaties veel makkelijker te implementeren zijn en ook veel vloeiender verlopen. De API voor scrollgestuurde animaties wordt op dit moment ondersteund in de volgende browsers:

Browser Support

• 115
• 115
• 
• 26

Source

In dit artikel vergelijken we de nieuwe aanpak met de klassieke JavaScript-techniek om aan te tonen hoe makkelijk en soepel scrollgestuurde animaties kunnen zijn met de nieuwe API.

Opmerking: De volgende prestatiewinst door het gebruik van scrollgestuurde animaties is beschikbaar vanaf Chrome 116.

De CSS API voor scrollgestuurde animaties versus klassiek JavaScript

De volgende voorbeeldvoortgangsbalk is gemaakt met JavaScript-technieken voor klassen.

Het document reageert elke keer dat de scroll-gebeurtenis plaatsvindt om te berekenen hoeveel procent van de scrollHeight de gebruiker heeft gescrold.

document.addEventListener("scroll&q>uot;, () = {
  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 animation-timeline zet een positie in een scrollbereik automatisch om in een voortgangspercentage.

Nu komt het interessante gedeelte: stel dat je in beide versies van de website een superzware berekening hebt geïmplementeerd die de meeste bronnen van de hoofdthread opslokt.

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 had verwacht, wordt de klassieke JavaScript-versie schokkerig en traag door de kruising van de hoofdthread-resources. De CSS-versie wordt daarentegen helemaal niet beïnvloed door het zware JavaScript-werk en kan reageren op de scrollinteracties van de gebruiker.

Het CPU-gebruik is heel anders in DevTools, zoals in de volgende screenshots wordt getoond.

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

Nieuwe JavaScript API voor scrollgestuurde animaties versus klassiek JavaScript

De voordelen van de nieuwe API zijn niet beperkt tot CSS'en. Je kunt ook vloeiende scrollgestuurde animaties maken met JavaScript. Neem het volgende voorbeeld door:

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

Zo kun je dezelfde animatie van de voortgangsbalk maken als in de vorige CSS-demo, maar dan alleen met 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 dan bij 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

Op deze demosite vindt u verschillende implementaties van scrollgestuurde animatie. Hier kunt u demo's vergelijken die deze nieuwe API's van CSS en JavaScript gebruiken.

Wil je meer weten over de nieuwe scrollgestuurde animaties? Check dan dit artikel en de I/O 2023-talk.