THIS IMAGE WILL APPEAR ON THE /BLOG PAGE WHERE ALL BLOGS ARE LISTED. 10 voordelen van het animeren met GreenSock

10 voordelen van het animeren met GreenSock

Elke, Copywriter
Geplaatst op 01-08-2016

(click here for English)

Dat de animatietool GreenSock dé trend op gebied van user interface animaties is, hoeven we je waarschijnlijk niet meer te vertellen. Echter is het framework sinds Google het aangeraden heeft pas écht populair geworden. Hoe het animeren met GreenSock ons afging? Best goed! Onze UX designer Bianca Zijtsel is druk met het ontwerpen van een homepage- en introanimatie (de ontwerpen houden we nog even geheim…) voor ons nieuwe platform met het hippe framework.

Eén van de knelpunten van online animaties is dat ze vaak niet in alle browsers optimaal presteren. Dat is precies waar het populaire GreenSock een oplossing voor biedt: het lost de inconsistenties op en zorgt ervoor dat alles werkt zoals verwacht wordt. Wij zijn super enthousiast over het GreenSock Animation Platform (GSAP), daarom delen we graag onze ervaring met jou als development hero. Natuurlijk zijn we ook benieuwd naar jouw belevenissen met GSAP. Tips en tricks zijn welkom!

GreenSock brengt animaties tot leven

GreenSock brengt animaties tot leven met behulp van Scalable Vector Graphics (SVG). Je animeert een scène, je creëert HTML5 banneradvertenties, je verbetert projectinterfaces… de mogelijkheden zijn eindeloos. We zetten de voordelen van het (effectief) animeren met GreenSock voor je op een rijtje:

1. Prestaties

De prestaties van GreenSock zijn – in verschillende browsers - indrukwekkend. Bovendien spelen GSAP animaties zowel op desktop computers, tablets als smartphones goed af. Het is niet nodig om aparte prefixes te benoemen, dit wordt onder de motorkap geregeld door GSAP.
 

2. Vloeiende overgangen

Het animatieplatform zorgt voor vloeiende overgangen en is supersnel. Sterker nog: het is twintig keer sneller dan jQuery, volgens het GSAP team. Het zou zélfs sneller zijn dan veel CSS3 animaties. Overigens werkt GSAP wel goed samen met jQuery.
 

3. Google DoubleClick en Adwords

GSAP wordt gehost op het CDN netwerk van Google Doubleclick, het werkt dus ook voor AdWords.
 

4. Tweedelige stresstest

Je kunt de prestaties van je animatie in verschillende browsers testen middels een tweedelige stresstest op de website van GreenSock. Bovendien kun je je animatie in verschillende bibliotheken testen, zo achterhaal je waar en hoe hij het beste presteert.
 

5. Meedere bibliotheken

GreenSock beschikt over meerdere bibliotheken die gespecialiseerd zijn in diverse soorten animaties. Blader de lijst eens door om te zien wat je ervan kunt gebruiken. It’s well worth the effort!
 

Een mooi voorbeeld is de website van Alfred Service

6. Tweenlite

Voor een basisanimatie heb je genoeg aan de belangrijkste bibliotheek van GSAP: Tweenlite. Deze kan naast andere bibliotheken zoals de MorphSVGPlugin gebruikt worden, mocht je meer functionaliteiten nodig hebben.
 

7. Adobe Animate

Als je Adobe Animate gebruikt, kun je ook gewoon animeren met GSAP in plaats van TweenJS (onderdeel van CreateJS).
 

8. GreenSock's Timeline

Uitgebreide animaties kun je zonder TweenLite bouwen, maar het is moeilijk om ze vervolgens te editen. Je animatie loopt het risico om vertraging op te lopen, omdat je de bewegingsduur van alle individuele animatieonderdelen moet instellen. Dat is wanneer GreenSock’s Timeline bibliotheek goed van pas komt: een robuuste timeline om gecompliceerde sequences op te zetten. Dit lost je timing issues op, want het verwijdert de afhankelijkheid van vertragingen.
 

9. Verschillende soorten elementen

Je kunt bijna alle elementen op een pagina animeren: DOM-elementen, elementen in een canvas, maar ook JS-objecten en elementen van een SVG. Al deze verschillende soorten elementen kunnen zelfs tegelijk in een sequence animeren.
 

10. Meerdere tijdlijnen

Je bent dus niet gebonden aan slechts één tijdlijn. Als je een animatie gecreëerd hebt die uit veel verschillende onderdelen bestaat, kun je voor ieder onderdeel een eigen tijdlijn aanmaken en ze onderbrengen in de hoofdtijdlijn.
 

Klinkt perfect… maar toch een flinke kanttekening: als de gebruiker JavaScript uit heeft gezet, dan is GSAP waardeloos geworden.

Overall zijn wij onder de indruk van de mogelijkheden van en het werken met GreenSock, vandaar de diverse geanimeerde elementen op onze website. Heb jij toevoegingen aan onze lijst? Laat het ons weten, we komen graag met je in contact!

Wil je op de hoogte blijven van het laatste IT Dev nieuws en de laatste IT Dev vacatures?

Benieuwd naar de laatste updates van GreenSock?