Tirsdag den 29. april 2025 havde vi semesterets sidste workshop – denne gang med fokus på animation. Opgaven gik ud på at bruge CSS og Adobe Illustrator til at skabe en simpel animation, som tog udgangspunkt i det storyboard, vi hver især havde lavet med inspiration fra et af de 12 animationsprincipper.
Kl. 14 skulle animationerne være klar og køre, for her gik vi og underviserne rundt og så hinandens produktioner. Som afslutning på dagen havde vi en lille afstemning, hvor man kunne stemme på hinandens arbejde i tre kategorier: “most creative”, “best production” og “people’s choice”. Jeg vandt ikke nogen af kategorierne – men det var stadig sjovt og inspirerende at se, hvor forskelligt alle havde grebet opgaven an.
Proces
I denne opgave skulle jeg skabe en simpel animation ved hjælp af CSS og Illustrator. Jeg tog udgangspunkt i et storyboard inspireret af et af de 12 klassiske animationsprincipper. Formålet var at arbejde med bevægelse på et grundlæggende niveau og samtidig få forståelse for, hvordan principperne kan anvendes – også i kodebaseret animation.
Mit fokus lå især på princippet Anticipation – altså forudgribelse. Det handler om at forberede seeren på, at noget er ved at ske. I praksis betyder det små forskydelser eller bevægelser, der kommer lige inden en større handling, og som skaber en mere naturlig og overbevisende rytme i animationen. Jeg brugte dette princip ved at lade et element trække sig lidt tilbage eller ændre form en anelse, lige inden det satte i gang med sin bevægelse. Det gjorde animationen mere dynamisk og mindre stiv.
Resultat
Refleksion
At arbejde med CSS-animation var en udfordring, der både motiverede og frustrerede mig. Jeg gik ind i opgaven med mange idéer og et klart billede af, hvordan jeg gerne ville have, at animationen skulle se ud – men jeg fandt hurtigt ud af, at det er én ting at have en idé og en helt anden ting at få den til at fungere teknisk.
Det første, jeg stødte på, var begrænsningerne i CSS. Jeg opdagede, hvor præcis man skal være i sin kodning, og hvor meget tid det kræver at få selv små bevægelser til at se naturlige ud. Det, der virkede som en simpel handling i hovedet, krævede pludselig mange linjer kode, justeringer af keyframes, delays og transforms for bare at få det til at ligne noget, der bevæger sig på en flydende måde. Jeg brugte meget tid på at eksperimentere med timingen og overgange mellem bevægelser, og det krævede en del trial-and-error.
Samtidig var det netop den proces, der gav mig indsigt i, hvor stor en forskel små ændringer kan gøre. At flytte en værdi med få millisekunder eller justere en rotation en anelse havde pludselig stor indflydelse på, hvordan animationen blev oplevet. Det lærte mig at være mere tålmodig og opmærksom på detaljerne – og det gav mig en ny respekt for animationsarbejde, også selvom det “bare” er i CSS.
Selvom slutresultatet ikke blev helt som jeg havde forestillet mig i starten, var det en stor succes for mig, at jeg fik noget til at bevæge sig. Det gav mig en følelse af at have overvundet noget, og det bekræftede, at jeg faktisk godt kan arbejde med animation – også selvom det føles teknisk svært. Jeg har fået en grundlæggende forståelse for, hvordan CSS-animation fungerer, og hvordan man med enkle virkemidler kan skabe liv og bevægelse i et digitalt design.
Jeg ved nu, at det her er noget, jeg skal øve mig mere på. Det er ikke en disciplin, jeg føler mig hjemme i endnu, men det har vækket en nysgerrighed hos mig, og jeg kunne godt tænke mig at arbejde videre med animation på et tidspunkt – gerne med flere værktøjer og mere kreativ frihed. Denne opgave har i hvert fald givet mig det første skridt i retning af at forstå, hvordan bevægelse kan være et stærkt visuelt virkemiddel, når det er brugt rigtigt.