THIS IMAGE WILL APPEAR ON THE /BLOG PAGE WHERE ALL BLOGS ARE LISTED. blog Animeren met Greensock - onze ervaringen

Animeren met Greensock - onze ervaringen

Lindsey Visser
Geplaatst op 04-05-2017

Geanimeerde websites zijn anno 2017 de normaalste zaak van de wereld. En met de opkomst van mobiele gebruikers is flash allang niet meer de standaard. in 2016 waren er zelfs voor het eerst meer mobiele internetgebruikers dan mensen die online gingen via een desktop of laptop. Geen flash meer dus! Maar wat gebruik je dan? Wij besloten de proef op de som te nemen en zelf een animatie voor Spilberg te ontwikkelen.

Voor deze animatie hebben we Greensock gekozen. Dit is natuurlijk dé animatie tool van het moment die, na het aanraden van Google, in populariteit blijft groeien. De prestaties op verschillende apparaten en de vloeiende overgangen waren voor ons de redenen om voor deze tool te kiezen. En, laten we eerlijk zijn, werken met een nieuwe tool is natuurlijk altijd leuk. Daarnaast zitten er nog veel meer voordelen aan het animeren in Greensock, deze voordelen hebben we al eerder voor je op een rijtje gezet.

Na deze beslissing kwamen wij uit bij Sander Giesing, hij heeft onze animatie ontwikkeld. Rond 2000 is Sander begonnen met het maken van geanimeerde landingspagina’s en banners, toentertijd deed hij dit voornamelijk met Adobe Flash. Een paar jaar later kwam hij in aanraking met Greensock, dit was op dat moment vooral een goede tween library voor Flash. Toen in 2005 duidelijk werd dat Flash Player nooit mobiel ging werken, heeft hij zich verdiept in geanimeerde SVG-bestanden. De fascinatie was er dus toen al. Alleen maakte de computers van toen het nog niet mogelijk om de gedroomde projecten uit te voeren.

Sander is altijd het animeren blijven oefenen. Dat is dan ook zijn tip aan mensen die ook willen animeren: “Het is een super cliché maar wel waar, animeren kost veel tijd en je moet er echt een passie voor hebben. Ik ben vaak gewoon aan het testen en aan het uitproberen. Niet omdat het moet, maar omdat het kan.”

Fast forward naar 2016. Wij kwamen in contact met Sander en vroegen hem om wat animatie-magie toe te voegen aan onze website. Ondertussen was Sander bekend met Greensock en ScrollMagic, hij besloot dan ook daarmee voor ons de animatie in elkaar te zetten. Belangrijk was dat het verhaal van Spilberg als sidekick verteld werd zonder dat daar een lap tekst aan te pas zou komen. We besloten om dit te laten zien met de verschillende datastromen die tussen ons als sidekick en de dev heroes bestaan. Daarnaast vonden we het belangrijk dat de extra events die wij organiseren duidelijk in beeld komen.

Met dit duidelijk startten wij met Sander dit project. Zijn tip voor andere die eenzelfde project willen ondernemen is vooral om veel te testen & debuggen. “Bij dit soort projecten loop je altijd tegen onverwachte problemen aan. Deze zijn bijna niet van tevoren in te schatten.” Een goed voorbeeld bij onze animatie zijn de geanimeerde stippellijnen die  de datastromen voorstellen. In een SVG kun je stippellijnen maken met de DrawSVG plug-in en met GSAP kun je SVG properties animeren. Bij het bedenken van deze stippellijnen voorzagen we dus ook geen problemen. Helaas bleek al snel dat je wél SVG-lijnen kunt laten groeien met de DrawSVG plug-in maar stippellijnen was teveelgevraagd.

Gelukkig is er altijd een oplossing. Na veel testen heeft Sander hier een creatieve oplossing voor gevonden. Doordat het mogelijk is om geanimeerde maskers te maken in SVG konden we de “stippellijn” maskeren met een geanimeerde “gewone” lijn. Hierdoor ontstaat de illusie dat de stippellijn zelf geanimeerd wordt.

Een andere uitdaging zit hem in het beheersbaar houden van de HTML. Als je met javascript SVG-data wilt animeren of interactief maken moet de SVG-data inline in een html-bestand zijn weggeschreven. Dit is terecht zo bepaald omdat er anders te veel mogelijkheden zijn om computers aan te vallen via onschuldig ogende illustraties die mogelijk vanuit onbekende bronnen ingebouwd zijn in websites. Het was even puzzelen om alle scenes inline html te laten zijn, waarbij elke scene een apart html-bestand is, terwijl alle javascript vanuit 1 plek de animatie aanstuurt. 

Al met al was dit een interessant en leerzaam project. Wij zijn benieuwd naar jullie ervaringen met Greensock en Scrollmagic. Nog mooie projecten die wij zeker moeten zien? Laat het ons weten!