GumGum | Stageblog van 4-12-2023 tot 18-12-2023

Tijdens deze periode heb ik veel tickets gemaakt, veel tickets van niveau brons en zilver maar ook custom tickets. Dit houd in dat ik het zelf custom design en programmeer. 

Ik ga het in dit weekoverzicht hebben over een ticket waarvan ik al een design had maar waar ze bepaalde animaties erin wouden hebben. De reden dat ik voor dit ticket kies is omdat ik in dit ticket voor de eerste keer met custom animaties aan de gang ging.

De opdracht

Ze wilden binnen 2 dagen een advertentie die eruit ziet als het design en waar een animatie inzat waar de artworks op de zijkanten er met een bepaalde manier bij kwamen zie hieronder het design en de verwachte animatie. B1-K1-W1 

https://youtu.be/R-OjrmOslF8

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 met een collega besproken hoe ik het animeren ging aanpakken.

We hadden besloten om eerst de zijkanten te verbergen en daarna met div’s de artworks aan de zijkanten te gaan maken. Dit omdat het dan makkelijk te animeren was. De div’s heb ik met procenten gemaakt zodat de artworks op alle beeldschermen responsive is. 

Voor het animeren zelf gebruikte ik GSAP dit is een JS library waardoor animeren makkelijker is. Door de div’s met width via gsap eerst op 0 te zetten kon ik blokje voor blokje door de class te targeten ze naar het goede formaat krijgen. Met een let functie zorg ik ervoor dat de timeline begint na 2 seconden zie hieronder:

Daarna begon ik in fases blokje per blokje te animeren hiervoor gebruikte ik gsap.to, met gsap.to kan ik aangeven wat er moet gebeuren met de class, zie hieronder een voorbeeld:

Na dat ik de linker kant had geanimeerd begint de rechterkant met een kleine overlay zijn timeline, zie hieronder de code:

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

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

Ook heb ik deze animatie gemaakt in een mobiel formaat, zie hieronder de mobiele versie,
https://preview.partners.gumgum.com/161458

Tijdens dit werkproces heb ik de advertentie getest en volledig responsive gemaakt. 

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

Reflectie

Ik ben trots op dit werk aangezien het mijn eerste keer is dat ik heb geanimeerd met javascript. Toen ik begon had ik geen enkel idee hoe ik hier überhaupt mee moest beginnen en nu heb ik een mooi resultaat en kan ik zelf dingen animeren zonder hulp. 

Na dit stageblog ben ik twee weken op vakantie geweest dus zal ik weer een post maken na 2 januari 2024.