Från animatör till att animera i kod – en intervju med Cornelia
by tjejerkodar
Hej Cornelia! Du håller på att utbilda dig till frontend-utvecklare hos Technigo just nu och jobbade tidigare som motion designer – berätta mer om din bakgrund!
Det stämmer, jag spenderade mest tid med 2D-animation i After Effects, men till och från lite 3D-animation i Cinema 4D eller frame by frame i Animate. Mest jobbade jag med informationsfilmer, reklam på digitala skärmar (i butiker, tunnelbanor, på stan etc) eller mindre animationer till webb, sociala medier eller mobilappar. Ibland fick jag ett manus och tog fram allt från storyboard och design till färdig animation med voice over och ljudeffekter, och ibland var jag inne bara för själva animationsdelen där allt annat gjordes av andra. Jag jobbade både med stora företag och deras marknadsavdelningar och mot mindre byråer som en extra resurs.
Vilka möjligheter har du upptäckt med att animera i CSS istället?
Oj, jag tror det finns många fler än jag upptäckt men hittills är väl det största med animation i kod att det ger en möjlighet att styra när olika typer av animationer ska ske, antingen genom interaktivitet eller andra parametrar som finns på webbplatsen. Som när vi byggde en väderapp under Technigo Bootcamp, när prognosen är klar himmel så visas en pulserande sol, när det ska vara regnigt visas regn osv. Men också hur det påverkar användarupplevelsen av en sida, man kan ge små subtila signaler när man klickar på en knapp eller när ny information finns att tillgå. Med just CSS-animationer så slipper man också ladda upp gif:ar, eller videos och du kan anpassa dem till din kod lättare än med färdiga filer, som färger, storlek, tempo osv.
Något tips som du kan ge en nybörjare med CSS animering?
Testa i Code Sandbox eller Codepen först, eller åtminstone så att du ser animationen visuellt samtidigt som du kodar. Börja med något enkelt, tona fram ett objekt med hjälp av opacitet eller animera en text i sidled till exempel (transform: translateX()). Sen googla, det finns så mycket online! Testa också att bryta ner andras kod, hitta en animation du gillar eller vill göra, titta på den koden och skriv av den (utan att kopiera/klistra in). Det finns också tutorials på YouTube, som med vanlig animation, som kan vara superhjälpsamt. Men testa att alltid göra något eget med koden också, så att du lär dig hur den fungerar och vad som händer om du ändrar i värdena eller lägger till/ tar bort kod.
Ni kan kika in Cornelias animering för hennes väderapp här: https://codesandbox.io/s/weather-animations-h0t5x?file=/style.css , och här kan ni se hela slutresultatet på väderappen: https://weather-project-cornelia.netlify.app/
