Blog

Web animaties: een beknopt overview

By december 8, 2020No Comments

Auteur: Ruuben Lambrechts

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 animaties leiden misschien af van de boodschap? Of maken je website trager?

 

Onze webdeveloper Ruuben Lambrechts is al jaren bezig met het creëren van toffe en vernieuwende webanimaties. Hij legt ons uit waarom je ze zou gebruiken en hoe je er dan mee aan de slag gaat!

Interactive cursor op de website van 14islands.com

Waarom web animaties?

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 animaties 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?

google material design

“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).

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 animaties 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.
gif physics engines example
  • 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.
gif transitions example web animations
  • Animation platforms: Deze libraries zijn volledige platformen om meer geavanceerde animaties te bekomen. Bv. wanneer je een verhalende website wil maken die interactief is.
gif animation platform react three fiber
  • 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.
gif example parallax web animation
  • 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.
  • 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.
gif sprite animation example old worker

Check het onderstaande overzicht voor alle tools per 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 animaties, sequenties 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 = animatie 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.

Ook de UX van je website sterker maken met animaties?

Contacteer ons

HQ
RMDY NV
Prins Boudewijnlaan 43
2650 Edegem

T: +32 3 450 86 42
E: info@rmdy.be