Iedereen weet dat leuke animaties op een webpagina (zolang ze met mate gebruikt worden) een pagina zeer hard kunnen opfleuren en dat het data-vriendelijk om SVG’s te gebruiken wanneer het voordelig is. Maar wat de meeste mensen niet weten is dat deze leuke animaties eigenlijk een hel zijn om te programmeren. Of toch, dat was het toch tot de opkomst van CSS3 en zijn compatibility met SVG’s. Zo sprak Benjamin De Cock in zijn toespraak “A yummy pinch of CSS in your SVG” op het Kikk-festival. We gaan even dieper in op de evolutie en toepasbaarheid van animaties in websites.

cssanimation
Voorbeeld van een css + svg animatie

Van JS tot CSS

Nog heel recent werden animaties alleen gedaan in pure Javascript, met de requestAnimationFrame functie om specifiek te zijn. Dit os een goede manier te zijn om heel specifieke animaties te krijgen en controle te hebben maar de code zelf is zeer ingewikkeld om te schrijven en nam veel tijd in beslag. Maar plots was daar Robert Penner en de opkomst van SVG2, wat ervoor zorgde dat geometrische properties simpel konden geïmplementeerd worden in CSS. De combinatie van de twee vormde dus de ultieme brug tussen CSS en Javascript. CSS werd gebruikt voor animaties en Javascript alleen nog maar om DOM te manipuleren. Ten slotte is er ook nog altijd de Web Animations API dat ervoor zorgt dat je animaties interactief kunt maken.

Wanneer gebruik je wat?

Meneer De Cock sloot zijn presentatie nog af door proper op te lijsten wanneer je welke code het beste gebruikt.

Ten eerste: gebruik altijd CSS wanneer het mogelijk is
CSS animaties zijn op dit moment de makkelijkste om te gebruiken, maar maak er dan ook gebruik van. De combinatie van CSS en SVG’s zijn dan ook niet alleen makkelijk om te gebruiken maar zijn ook super licht om te downloaden. Zo voorkom je dat je pagina extra tijd neemt om te downloaden en ook dat iemand zijn data limiet op zijn smartphone erdoor jaagt.

Ten tweede: gebruik Web Animations API voor interactiviteit
Als je meer wilt dan gewoon een icoontje dat van kleur verandert wanneer je erover hovert dan is het het beste om voor WA API’s te gaan. Zo kan je makkelijk met keyframes de interactiviteit van je animatie besturen.

Ten derde: gebruik requestAnimationFrame als je grote animaties wilt controlleren
Ondanks dat het een “ouderwetse” en moeilijke methode is blijft het nog altijd de beste om te gebruiken wanneer je nog meer controle nodig hebt dan bij de vorige twee methodes. RAF is en blijft en zeer specifieke methode en is dus nog atlijd zeer bruikbaar.

 

Probeer hier zelf eens te animeren met CSS en SVG.