Breng je website tot leven met animaties en transities

Inleiding

Iedereen kent PowerPoint. En iedereen kent ook het verschil tussen een presentatie die soepel loopt en waarbij animatie wordt gebruikt om de inhoud te benadrukken. Daarnaast kent bijna iedereen ook het “death-by-powerpoint”-principe, waarbij de aanwezigen alleen maar worden overladen met teksten, afbeeldingen en animaties die meer afleiden dan dat ze helpen een boodschap over te brengen.

Waarom noem ik deze twee voorbeelden? Animatie kan zowel meewerken als tegenwerken!

Animaties en transities

Maar waar hebben we het nu precies over? Ik zal het uiteen zetten:

• Animatie: een verandering van bijvoorbeeld kleuren, positie, of vorm die van tevoren is gedefinieerd
• Transitie: de geleidelijke overgang tussen 2 verschillende visuele stijlen (bijvoorbeeld een button waar de muiscursor overheen beweegt)

Hoe maak je eigenlijk animaties en transities?

Er zijn verschillende manieren om ze te maken. Hier bespreek ik de 2 belangrijkste manieren.

Via CSS

CSS biedt veel mogelijkheden voor het maken van animaties en transities. De meest simpele is een transitie. Zoals gezegd maak je hier een overgang mee tussen 2 visuele stijlen.

/* property name | duration | timing function | delay */  
transition: all 1s linear 0,5s;

Stel je een button voor die oranje is, maar als je er met de muis overheen gaat wordt deze wit, en de tekst oranje. Deze stijlen maak je in CSS door een button selector te gebruiken, en een button: hover. Zonder een transitie is de overgang direct; zodra de muis boven de button komt verandert deze meteen van kleur. Maar als je bovenstaande code toevoegt aan de button:hover, dan zal de kleur pas gaan veranderen na 0,5 seconde delay, en er vervolgens 1 seconde over doen om zich aan te passen.

Animaties werken net iets anders: hierbij definieer je eerst de animatie zoals je die wilt maken met een zogenaamde keyframe animatie die je maakt met @keyframes object. Hier geef je aan welke je eigenschappen je wilt aanpassen van het begin tot het einde.

@keyframes move {  
  from {  
    transform: translate3d(0, 0, 0);  
  } to {  
    transform: translate3d(90vw, 0, 0);  
  }
}

In dit @keyframes object met de naam “move” verplaatsen we een element van 0 naar 90% van de viewport-width. Vervolgens kunnen we in de styling opgegeven dat de animatie moet worden toegepast op het element:

animation: move 3000ms 200ms ease-out alternate infinite;

Hier geven we op dat de bal een animatie krijgt met de naam: “move”, en dat de animatie 3 seconden duurt, en start na een delay van 200 milliseconden. “alternate” geeft aan dat de animatie heen en weer gaat, en infinite dat de animatie oneindig loopt.

Of via JavaScript

Naast CSS is het ook mogelijk om animaties te maken via JavaScript. Dit doe je door een element te selecteren en vervolgens gebruik te maken van de Web Animations API. Dat laatste doe je door .animate() uit te voeren op dat element.

let ball = document.querySelector(".ball");
ball.animate(
  [
    { transform: "translate(0, 0)", offset: 0 },
    { transform: "translate(90vw, 0)", offset: 1 },
  ],
  {
    duration: 2000,
    direction: "alternate",
    iterations: Infinity,
  }
);

Hier selecteren we een element met een class. ball en animeren we deze horizontaal van de plaats op het scherm waar hij is, tot 90% van de viewport-width. de animatie duurt 2 seconden, en de afspeelrichting is heen en terug (“alternate”) en het aantal herhalingen staat op Infinity.

Maar wanneer kies je voor CSS, en wanneer voor JavaScript?

Hieronder zet ik de voor en de nadelen uiteen:

• Makkelijk bruikbaar (implementatie, syntax)
  CSS: Ja
  JavaScript: Ja
  Zoals te zien is in de twee voorbeelden, is de syntax eenvoudig. Beide methodes zijn makkelijk te implementeren in een bestaande pagina.
• Ondersteunt transitions en animaties
  CSS: Ja
  JavaScript: Nee
  JavaScript kent geen transitions, CSS wel. Uiteraard kun je een animatie maken om een overgang te creëren tussen twee visuele stijlen
• Gunstig voor Memory en CPU
  CSS: Ja
  CSS-animaties zijn over het algemeen minder belastend voor de browser en het systeem waar deze op draait. Bij JavaScript gaan de applicaties over de main thread. Dit houdt in dat een animatie wordt geladen over dezelfde lijn als alle data.
• Animaties op basis van tijd
  CSS: Ja
  JavaScript: Ja
  CSS-animaties zijn altijd gebaseerd op tijd. Hoewel dit bij JavaScript ook kan, heb je ook de mogelijkheid om op basis van events (bijvoorbeeld input en state change) animaties te maken.
• Animaties op basis van dynamische content
  CSS: Nee
  JavaScript: Ja
  Animaties maken op basis van ingevoerde waarden, of op basis van de applicatie state kan alleen met JavaScript. Uiteraard kan je wel een CSS-animatie triggeren met JavaScript.
• Complexe animaties
  CSS: Eventueel
  JavaScript: Ja
  Complexe animaties zijn mogelijk in zowel CSS als in JavaScript. Echter biedt JavaScript meer mogelijkheden, zowel in methodes om complexe berekeningen als in de implementatie. Zeker ook in combinatie met libraries als Greensock.

Is er meer?

Naast alle animaties zelf schrijven (in CSS of in JavaScript) zijn er een ook libraries en frameworks die je kunnen helpen met het maken van animaties.

De meest populaire is Greensock Animation Platform (GSAP). Dit is een erg krachtig platform om in JavaScript animaties te maken. Het is vooral goed in het maken van Timelines; een reeks geschakelde animaties waarbij elke stap pas start als de stap ervoor klaar is. Ook heeft GSAP “staggers” waarmee meerdere elementen tegelijkertijd worden geanimeerd met een random volgorde.

​

Wil je meer leren, en net als het Front-End team de diepte induiken van animaties en transities? Johan heeft de slides van zijn presentatie online gezet: https://levelup-animations.netlify.app/#/