Webanimaties: een beknopt overview

RMDY Blog_Webanimaties header

Webanimaties maken het interessanter om naar een webpagina te kijken, toch? Misschien is er een interactieve cursor, zijn er dansende blobs op de achtergrond of een knipperende knop die je duidelijk maakt waar je je moet inschrijven. Ook onze klanten vragen vaker animaties wanneer we een website ontwikkelen voor hen, en gelijk hebben ze. Alleen moeten we steeds een goede afweging maken tussen “leuk” en “gebruiksvriendelijk”. Want teveel webanimaties leiden misschien af van de boodschap? Of maken je website trager?

Interactive cursor op de website van 14islands.com

Waarom webanimaties?

Volgens sommige zijn webanimaties niets meer dan een gimmick, maar als je ze in de juiste gevallen gebruikt en op de juiste manier, is het zoveel meer dan dat. Dan verrijken animaties de gebruiksvriendelijkheid van je website.

In veel gevallen worden animaties gebruikt om de aandacht van de gebruiker te vestigen op een belangrijk element of om aan te tonen dat een element clickable is.

Een voorbeeld van een gebruiksvriendelijke animatie, is een formulierveld dat rood wordt en “shaket” wanneer je het verkeerd of niet invult. De animatie stelt dan het “nee” schudden van een persoon voor en maakt meteen duidelijk aan de gebruiker wat er mis loopt.

Dus waarom webanimaties gebruiken? Omdat het de user experience net die ene boost kan geven die nodig was.

Waarom webanimaties?

Volgens sommige zijn webanimaties niets meer dan een gimmick, maar als je ze in de juiste gevallen gebruikt en op de juiste manier, is het zoveel meer dan dat. Dan verrijken animaties de gebruiksvriendelijkheid van je website.

In veel gevallen worden animaties gebruikt om de aandacht van de gebruiker te vestigen op een belangrijk element of om aan te tonen dat een element clickable is.

Een voorbeeld van een gebruiksvriendelijke animatie, is een formulierveld dat rood wordt en “shaket” wanneer je het verkeerd of niet invult. De animatie stelt dan het “nee” schudden van een persoon voor en maakt meteen duidelijk aan de gebruiker wat er mis loopt.

Dus waarom webanimaties gebruiken? Omdat het de user experience net die ene boost kan geven die nodig was.

De kracht van webanimaties volgens Google

Google gelooft ook in de kracht van animaties. De elementen van Google’s Material Design library zitten namelijk vol animaties. Ze vertellen de gebruiker meer over het element of hoe je ze moet gebruiken.

“Motion in material design should embrace the familiarity and real-world behavior of physical objects, without sacrificing elegance, simplicity, and beauty.”

Google material design guidelines

Google raadt aan om elementen te gebruiken die wijzigen van snelheid of duur, naargelang welk doel of effect je wil bereiken. Zo gebruikt Google elementen die op het scherm verschijnen wanneer die de aandacht van de gebruiker vragen, en weer verdwijnen van het scherm wanneer ze niet meer nodig zijn. It’s only logical, toch?

RMDY Blog_Webanimaties gif
Een animatie is een manier om je doel te bereiken, niet het doel zelf. Ze moet altijd de interactie met de website bevorderen.

Web animation tools, plug-ins & libraries

Waar zoek je nu al die animaties? Er bestaan gelukkig talloze libraries die zich focussen op web animations! De libraries zijn gebaseerd op CSS3 transitions, JavaScript, SVG animations, WebGL en HTML5 Canvas. Sommige hebben een specifiek soort animaties, andere kan je gebruiken voor verschillende soorten animaties. Ik som er enkele op:

  • Animate.css is een algemene library waar je gemakkelijk animaties kan in configureren.
  • Tween.js is gespecialiseerd in tween animaties: aan de hand van verschillende losstaande frames creëer je de illusie van beweging, denk aan het principe van de papieren flip books van vroeger. Standaard voorbeelden hiervan zijn ‘ease-in’, ‘ease-out’. Als je een sequentie van vloeiende animaties wil bekomen is Tween.js een goede optie. (zie afbeelding)
  • Met SVG.js kan je properties van SVG’s makkelijk animeren.
  • Eén van mijn favoriete libraries is Three.js: deze is gespecialiseerd in 3D-animaties aan de hand van WebGL (JavaScript API).
RMDY Blog_Webanimaties animations platform

Dit zijn maar enkele van de vele libraries die bestaan om je gewenste resultaat te bekomen. Check vooral het onderstaande overzicht en test uit wat het beste bij je past.

Soorten webanimaties en hun tools

Naast de vele libraries zijn er dus ook veel verschillende soorten animaties die je kan gebruiken om je website te onderscheiden van de rest. Een kort overview:

Physics engines: 

Een type software engine, origineel ontworpen voor video games, die ervoor zorgt dat elementen zich realistisch gedragen. Een voorbeeld hier van is een vlak met cirkels die zich bij de start van de animatie naar een willekeurige richting verplaatsen. Wanneer de cirkels een rand of elkaar raken, kaatsen ze terug weg.

RMDY Blog_Webanimaties physics enging
Transitions: WRMDY Blog_webanimaties transitionsanneer je een slideshow maakt, wil je waarschijnlijk gebruik maken van transities tussen de verschillende slides of voor de elementen op een slide. Bv. fade in, fade out, vervangen of verscherpen. Met Transition Libraries vind je exact wat je nodig hebt.

Transitions: 

Wanneer je een slideshow maakt, wil je waarschijnlijk gebruik maken van transities tussen de verschillende slides of voor de elementen op een slide. Bv. fade in, fade out, vervangen of verscherpen. Met Transition Libraries vind je exact wat je nodig hebt.

Animation platforms: 

Deze libraries zijn volledige platformen om meer geavanceerde animaties te bekomen. Bv. wanneer je een verhalende website wil maken die interactief is.

RMDY Blog_Webanimaties animations platform
RMDY Blog_webanimaties scroll paralax

Scroll, Parallax: 

Als je wil dat de gebruiker door je pagina gaat aan de hand van pagination, of wanneer je een parallax effect op je foto’s / elementen wil toevoegen wanneer de gebruiker scrollt.

3D: 

Wil je een interactief 3D-logo op je website dat animeert op muziek? Dan zijn 3D libraries je ding! Er wordt echter nog een onderscheid gemaakt voor mobile optimized libraries, omdat sommige 3D-animaties niet werken op mobile devices of omdat ze te zwaar zijn voor de performantie van mobile devices.

RMDY Blog_Webanimaties header

Sprite animations: 

Wanneer je een spel wil maken met sprite images (2D-afbeeldingen), of iets anders wil bereiken met sprite images, kan je deze libraries gebruiken om de borders van je sprites te bepalen, en aan welke frames per second deze moeten animeren etc.

Onderstaand overzicht geeft je een goed beeld van alle tools per animatiecategorie.

RMDY Blog_Webanimaties overzicht animatiecategorie

En hoe zit dat met de performance?

Een vraag die je ongetwijfeld al gesteld hebt is: welke impact hebben die verschillende libraries en animaties nu op de performance van mijn website? Welke kan ik best gebruiken?

Hieronder vind je enkele checks die je kan overlopen om je keuze te bepalen.

  • Je kan best CSS-animaties gebruiken wanneer je simpele animaties wil, zoals het veranderen van de opacity (doorzichtigheid) van een foto wanneer je erover hovered, een element van positie wil veranderen of wil schalen. Enkele properties die je hiermee moet vermijden om te gebruiken zijn: width, height, padding en margin. Je kan beter een Scale of Translate hiervoor gebruiken, gezien deze properties een kleinere impact hebben op de performance.
  • JavaScript wordt gebruikt bij complexere animatiessequenties van animaties, animaties van een canvas, progress indicators, animaties op een gif / video of om een pad te animeren. Het eerste wat je moet doen om een JavaScript-animatie te maken, is een requestAnimationFrame-functie uitvoeren. Let op: probeer niet op elke frame van je animatie een inline style aan te passen. Zorg ervoor dat je animaties en events apart worden beschreven en enkel opgeroepen worden wanneer dit event wordt afgevuurd. Maak dus zeker geen repaint loops, hierdoor zal je website crashen en dat wil je natuurlijk niet ????
  • Wil je een transformatie van een element doen via JavaScript? Gebruik dan best een 3D-animatie. Die animaties hebben een kleinere impact op je performantie omdat ze via de GPU gebeuren.

Werken op maat = webanimatie op maat

Je besluit over welk framework, soort animatie en of je CSS of JavaScript animaties gebruikt, hangt uiteindelijk af van de vereisten van elk project. Sommige factoren die meespelen in deze keuze zijn: op welke browsers moet de website werken, op welke toestellen, wat wil de klant bereiken, wie is je doelpubliek, enzovoort.

Ik geloof sterk dat webanimaties in elk project een meerwaarde kunnen hebben voor de eindgebruiker. Zo kan je als bedrijf een betere User Experience bereiken of je onderscheiden van de concurrentie met nét dat tikkeltje extra op je website.

Nood aan een verfrissende website voor jouw bedrijf?