GumGum | Stageblog van 02-01-2024 tot 12-01-2024

Tijdens deze periode heb ik gewerkt aan verschillende tickets, tickets van beide niveau brons en zilver maar ook custom tickets. Ik heb dus gewerkt aan tickets boven het niveau dat ik eerder mee bezig was.

Ik ga het in dit weekoverzicht hebben over een ticket van IG, dit is een bedrijf dat een app heeft voor investeringen. De reden dat ik dit ticket heb gekozen is omdat ik wil aantonen dat er verbetering zit in mijn animatie skills.

De opdracht

Deze advertentie wouden ze binnen 3 dagen afhebben, hier heb ik rekening mee gehouden wat betreft ander werk wat ook af moest die dagen. Bij deze opdracht zaten een aantal bestanden, een design van hoe ze de advertentie willen hebben en een foto met daarin uitleg van hoe ze het geanimeerd willen hebben, zie hieronder het design. B1-K1-W1 

 

Zie hieronder het animatie plan:

 

Werkwijze

Eerst begon ik met het design verwerken naar code. Hierdoor had ik het volledige design al af voordat ik met de animaties begon. 

Daarna heb ik in de GSAP library gelezen hoe ik deze animaties het beste kon doen. Voor animatie 1 en 2 gebruik ik scale omdat je dan een inzoom effect krijgt. Bij animatie 3 en 4 gebruik ik Y om hem naar beneden te halen en opacity om er een beter effect aan te geven, daarnaast gebruik ik voor animatie 3 waar ze een staggered effect wouden de stagger zodat eerst deel 1 naar beneden komt en daarna deel 2.

Nadat ik wist hoe ik deze animaties kon verwerken in mijn code ben ik begonnen met een andere manier van de animaties te laten starten. In plaats van een let functie te gebruiken die een timeline start heb ik bedacht dat ik een functie ging maken die begon zodra er een bericht binnen kwam. Dit bericht gaf ik via javascript aan de rest van mijn code wanneer de volledige code is geladen. Zie hieronder de functie:

Nadat deze functie het bericht stuurt van “startanim” begint mijn code in andere delen van de Javascript met het animeren. Voor het animeren gebruikte ik gsap.to weer om aan te geven wat voor animaties er moesten komen. Hiervoor heb ik scale, opacity en y gebruikt. Daarnaast heb ik met delay aangegeven op welke volgorde alles erin moest komen.

Zie hieronder het rode vierkant voor het bericht ontvangen en starten, daaronder ziet u de animaties die ik gebruik:

B1-K2-W1, B-H1, B-H3, B-H4, B-H6, B1-K1-W4, B1-K1-W5

Zie hieronder de advertentie die ik met deze opdracht heb gemaakt:

https://preview.partners.gumgum.com/163512

Tijdens dit werkproces heb ik de advertentie getest en volledig responsive gemaakt. Zodat hij meteen goedgekeurd werd bij de technische check. 

 

Reflectie

Ik vind dat ik deze opdracht goed heb uitgevoerd en heb mezelf eerst goed ingelezen op de beste manier om deze animaties te maken. Verder ben ik blij met het resultaat en is deze advertentie meteen goedgekeurd door beide de Design check en Technische check hiervoor heb ik ook een compliment gekregen van de projectmanager.