I denne workshop tegnede jeg en personlig karakter i Adobe Illustrator og animerede den ved hjælp af CSS. Formålet var at øve CSS-animation og eksperimentere med de 12 animationsprincipper.

Forud for workshoppen læste jeg Utilstrækkelig af Christian Hjortkjær – en bog, der satte ord på noget, jeg længe har mærket indefra, men haft svært ved at forklare. Det handler ikke bare om at være stræber eller perfektionist, men om den grundlæggende fornemmelse af aldrig helt at slå til, lige meget hvor meget man gør sig umage. Om hele tiden at skulle gøre lidt mere, være lidt bedre og strække sig lidt længere. Om at føle sig utilstrækkelig, selv når man gør alt, hvad man kan. Og om, hvordan hvile ikke længere føles som en ret, men som noget, man først skal gøre sig fortjent til.

Bogen gav mig et nyt perspektiv på mit eget behov for hele tiden at præstere og den skyldfølelse, jeg oplever, når jeg tager en pause. Den satte ord på min konstante jagt efter ”bedre” og gav mig et rum til at reflektere over, hvordan hvile ofte føles som noget, jeg først skal gøre mig fortjent til. Bogen blev samtidig en vigtig inspirationskilde til min animation, der kredser om netop dette tema: at give sig selv lov til at hvile uden skyld.

Med min illustration ønskede jeg at skabe en visuel påmindelse om, at det er helt okay at tage en pause. At hvile ikke er et tegn på dovenskab, men et udtryk for selvomsorg.

Proces

Research og idéudvikling

Efter en kort brainstorm besluttede jeg at lave en animation af en pige, der trykker på en pauseknap, hvorefter en lysstråle strømmer ud og suser rundt om hende.

For at finde den rette stil til min karakter lavede jeg research på forskellige visuelle universer og fandt særlig inspiration i animationsserien Eventyrtid (billede 1). Seriens visuelle stil er kendetegnet ved en simpel streg, bløde bevægelser og et legende udtryk, hvilket jeg ønskede at overføre til mit eget arbejde. Jeg undersøgte, hvordan karakterernes proportioner og bevægelser var konstrueret, og brugte det som afsæt for udviklingen af min egen figur. Målet var at finde en balance, hvor illustrationen både var enkel og udtryksfuld.

Udvikling af storyboard

Inden jeg gik i gang med selve animationen, udarbejdede jeg et storyboard for at strukturere forløbet, planlægge bevægelserne og sikre et naturligt flow i animationen (billede 2). Allerede fra starten havde jeg fokus på at skabe en loop-effekt, så animationen kunne gentage sig flydende uden tydelig start eller slutning. Undervejs overvejede jeg også, hvordan de 12 animationsprincipper kunne inddrages for at gøre animationen mere levende og troværdig.

Design af spritesheet

Jeg besluttede, at animationen skulle vises i et 500×500 px format og oprettede derfor et artboard i Adobe Illustrator på 15.000x500px for at gøre plads til 30 frames placeret vandret ved siden af hinanden. Inden jeg gik i gang med at tegne digitalt, lavede jeg en hurtig skitse af min karakter med papir og blyant (billede 3).

Denne skitse overførte jeg til Illustrator og brugte som guide, da jeg tegnede karakteren (billede 4). Jeg tegnede karakteren på ét lag og arbejdede herefter videre med animationen ved at kopiere laget og justere kroppens dele med pin tool (billede 5). Jeg ændrede for eksempel vinklen på hovedet, armens position og hårets placering afhængigt af bevægelsesforløbet, så bevægelsen fremstod så naturlig og afslappet som muligt. De små lysglimt, der optræder mod slutningen af animationen, blev tilføjet med flair tool.

Jeg endte med 57 frames i alt– væsentligt flere end forventet – og derfor blev jeg nødt til at gemme hver enkelt frame som PDF og overføre dem til et nyt dokument med et større artboard på 28.500x500px. Her placerede jeg alle frames side om side i ét samlet billede, der udgjorde mit spritesheet (se videoen forneden).

Animation med HTML og CSS

For at afspille animationen indsatte jeg spritesheetet som baggrundsbillede i et <div>-element med faste dimensioner på 500x500px – svarende til størrelsen på én enkelt frame. Jeg koblede HTML-filen til et eksternt CSS-stilark (style.css), hvor animationen blev defineret.

I CSS definerede jeg animationen med @keyframes, hvor baggrundens position forskydes vandret fra 0px til -28.500px. Da baggrundsbilledet skal bevæge sig mod venstre, anvendes en negativ værdi. For at sikre, at animationen springer præcist fra én frame til den næste, uden at glide, brugte jeg funktionen steps(57), der svarer til antallet af frames i spritesheetet. Jeg tilføjede background-repeat: no-repeat; for at sikre, at baggrundsbilledet kun vises én gang og ikke gentages uden for det synlige område af <div>-elementet. Animationen blev sat til at køre i loop med infinite og har en samlet varighed på 2 sekunder. Billede 6 og 7 viser min kode i henholdsvis HTML og CSS.

Test og justering

Ved første test fungerede animationen ikke som forventet. Over halvdelen af billedet blev afskåret, animationen kørte alt for hurtigt, og flere af framesene blev slet ikke vist. Efter en grundig fejlsøgning opdagede jeg, at spritesheetets størrelse havde ændret sig i konverteringsprocessen fra Illustrator til PNG. Det oprindelige dokument på 28.500x500px var nu blevet til 59.508×1.044px, hvilket betød, at én enkelt frame nu var 1.044×1.044px – altså væsentligt større end tidligere.

Jeg opdaterede derfor CSS’en, så den matchede de nye mål. Jeg ændrede width og height fra 500px til 1.044px og justerede background-position til at bevæge sig fra 0px til -59.508px. Jeg satte animationens varighed op til 4.5 sekunder, så bevægelsen fik et mere roligt tempo, og tilføjede transform: scale(0.5) og transform-origin: top left, så animationen blev skaleret ned uden at forskyde udgangspunktet (billede 8)

Animationsprincipper

Tabel 1 giver et overblik over de 12 animationsprincipper og viser hvordan jeg har brugt dem i min animation.

Resultat

Videoen viser den færdige animation med korrekt frame-størrelse, afspilningshastighed og glidfri overgang mellem frames.

Reflektion

Workshoppen har været virkelig sjov og lærerig på mange måder! Jeg har ikke kun styrket mine tekniske færdigheder i Illustrator og CSS, men også fået en mere nuanceret forståelse for, hvordan de 12 animationsprincipper kan anvendes bevidst til at skabe levende og udtryksfulde animationer.

Jeg blev overrasket over, hvor stor en forskel selv små, subtile ændringer i bevægelse og timing kunne gøre. Det gik hurtigt op for mig, at principper som Arc, Follow Through og Timing ikke bare er tekniske greb, men helt afgørende for at skabe animationer, der føles troværdige og stemningsfulde. De tilføjer dybde og gør, at karakteren opleves som mere udtryksfuld – også selvom animationen i sig selv er simpel.

Ét princip, jeg ikke nåede at arbejde aktivt med, var Slow in/Slow out. Jeg overvejede at skabe effekten i CSS med animation-timing-function: ease-in-out;, der gør animationen langsommere i starten og slutningen. Men det ville kun påvirke animationens overordnede tempo – ikke de enkelte bevægelser i pigens krop og hår, som jeg gerne ville justere. For at skabe Slow in/Slow out-fornemmelse i netop disse dele, skulle jeg have tænkt det ind allerede i opbygningen af spritesheetet, for eksempel ved at gentage frames i starten og slutningen af bevægelserne. Det er en vigtig læring, som jeg vil tage med mig fremover, når jeg planlægger animationer frame for frame.

Arbejdet med spritesheetet gav mig samtidig en konkret forståelse for de tekniske udfordringer ved animation i CSS. Jeg havde ikke forestillet mig, hvor omfattende det ville være at holde styr på 57 frames – og jeg blev for alvor udfordret, da eksporten ændrede billedets størrelse og forstyrrede hele mit setup. Det var frustrerende i øjeblikket, men også enormt lærerigt, fordi det tvang mig til at forstå, hvordan background-position fungerer, hvordan steps() præcist oversætter antallet af frames, og hvordan dimensioner og skala spiller sammen. Det blev et teknisk benspænd, der i sidste ende gjorde mig mere sikker i mit arbejde.

På trods af de praktiske udfordringer er jeg blevet meget glad for spritesheet-metoden. Jeg oplevede, at den gav mig langt større kontrol over animationens udtryk, fordi jeg kunne finjustere hver eneste frame enkeltvis. Jeg overvejer derfor at bruge metoden igen til en længere animation i min præsentationsportfolio. Dog er jeg også bevidst om begrænsningerne: Allerede ved 57 frames blev arbejdsmængden stor, og både filstørrelse og CSS-håndtering mere kompleks. Det har fået mig til at overveje, om spritesheets er den rette metode til længere animationer. Vi har tidligere arbejdet med Adobe After Effects, og jeg tænker, det kunne være mere hensigtsmæssigt at bruge det værktøj og i stedet eksportere animationen som video og implementere den via HTML og CSS.

På det personlige plan har arbejdet med temaet om utilstrækkelighed og retten til hvile givet mig et vigtigt refleksionsrum. At kunne bruge animation til at udtrykke noget så personligt har været en påmindelse om, at design ikke kun handler om æstetik og teknik, men også om at skabe forbindelser, gøre indtryk og vække eftertanke. Jeg har fået en ny forståelse for, hvordan bevægelse i sig selv kan fortælle en historie og fremkalde en følelse – og hvor vigtigt det er at arbejde bevidst med detaljer og rytme i animationen. Hvis jeg skulle arbejde videre med animationen, ville jeg gerne tilføje baggrundsmusik eller lydeffekter for at forstærke stemningen og understøtte budskabet. Jeg er ikke sikker på, hvordan man kan integrere lyd med CSS, men det er noget, jeg kunne undersøge nærmere.