Animasjoner – Hva er det og bør du eller bør du ikke ha dem på nettsiden din?

Kort sagt kan man si at animasjoner er ting som beveger seg på nettsiden din.  Det kan være en overskrift som siger ned ovenfra, en boks som sklir inn fra siden, elementer som skifter farge eller seksjoner som beveger litt på seg når du scroller nedover siden osv.  

Når animasjoner er riktig brukt, kan det se veldig fint og profesjonelt ut og gi nettsiden et moderne preg.  Men dersom de er feil brukt kan det virke distraherende og irriterende.

Så, er det så lurt å bruke dem?

• Bedre brukeropplevelse (UX): Små animasjoner, som når man holder musepekeren over en knapp og den skifter farge, kan gi umiddelbar respons og gjøre nettsiden mer intuitiv.
• Økt engasjement: Levende elementer fanger oppmerksomheten til de besøkende raskere og kan holde på interessen lenger.
• Visuell historiefortelling: Animasjoner kan forklare komplekse konsepter, vise hvordan et produkt fungerer, eller lede brukerens blikk mot viktige elementer (CTA-knapper).
• Profesjonelt og moderne inntrykk: Gjennomførte animasjoner av høy kvalitet kan gi merkevaren din en unik karakter og få nettsiden til å virke mer dynamisk.

‍

• Tregere lastetid: Tunge animasjonsfiler (som store GIF-er eller komplekse skript) kan øke lastetiden betraktelig, noe som kan føre til at brukere forlater siden. Dette igjen påvirker din plassering i søkelisten til søkemotorene negativt. I stedet for tunge GIF-er eller videoer som gjør nettsiden treg, bruker moderne webdesignere noe som heter Lottie-filer. Dette er kodebaserte animasjoner som er knivskarpe på alle skjermer, men som har en filstørrelse som er en brøkdel av en vanlig bildefil. Både Webflow og Elementor støtter Lottie animasjoner.
• Dårligere tilgjengelighet (Accessibility): For personer med epilepsi, ADHD, vestibulære forstyrrelser eller synshemminger kan blinkende eller konstante bevegelser være svært forstyrrende eller utløse ubehag. Moderne nettsider kan oppdage om brukeren har skrudd av animasjoner på telefonen eller PC-en sin (en innstilling som heter Prefers-Reduced-Motion). Webflow og kode kan settes opp til å automatisk skru av animasjonene for akkurat disse brukerne.
• Kan virke distraherende: Hvis det skjer for mye på skjermen samtidig, kan det overvelde brukeren og ta oppmerksomheten bort fra det faktiske innholdet eller målet med besøket.
• Tekniske problemer og kompatibilitet: Avanserte animasjoner fungerer ikke alltid likt på alle nettlesere eller eldre mobiltelefoner, noe som kan gi en hakkete og dårlig opplevelse for noen brukere.

Eksempler på dårlig bruk (Hva bør du ikke gjøre?)

• ‍Scroll-jacking: At nettsiden endrer på hvordan man scroller (f.eks. at siden scroller unaturlig fort, sakte eller "hakker" i faste trinn). Dette hater de aller fleste brukere.‍
• Bakgrunns-videoer som aldri stopper: Store videoer som looper i bakgrunnen bak en tekst, noe som gjør teksten umulig å lese.‍
• Ting som flytter på seg etter at siden er lastet: Knapper eller tekst som plutselig hopper nedover fordi et bilde eller en animasjon laster tregt, slik at brukeren klikker feil.

Å lage en animasjon fra bunnen av, krever god kunnskap om HTML, CSS og JavaScript, og kan være vanskelige å få til, men heldigvis har CMS-plattformer som Webflow og Elementor (en Wordpress plugin for å lage nettsider) gjort prosessen mye enklere for deg.  Dersom du ikke brenner for å lære å lage animasjoner fra bunnen av, kan du nå med noen raske innstillinger skape flotte effekter på nettsiden din.  

Animasjoner har forskjellige settinger alt etter hva du ønsker å animere, men kort sagt går det på at et element går fra en tilstand (farge, posisjon, størrelse osv) og til en annen tilstand.  Den kan f.eks flytte seg fra et punkt til en annen.

Her er en liten oversikt over de viktigste innstillingene du bør vite om:  

• Trigger-element: Hvilket spesifikt element som starter prosessen. Klikker du på en knapp for å åpne en tekstboks, er knappen trigger-elementet.
• Action: Hva elementet faktisk skal gjøre (f.eks. en overskrift som daler ned ovenfra).
• Initial state: Tilstanden elementet er i før animasjonen starter (f.eks. at den er helt usynlig).
• Timing & Delay: Hvor lang tid animasjonen tar, og hvor lenge den skal vente før den starter.
• Easing: Hvordan bevegelsen oppfører seg (f.eks. om den starter raskt og bremser ned mot slutten, noe som føles mer naturlig for det menneskelige øyet).
• Loop: Skal animasjonen skje én gang, eller gjentas uendelig? (Tips: Overskrifter bør skje én gang, mens en bildekarusell gjerne kan gå i loop).

Hva kan animeres – Less is more

Alt kan animeres, men ikke alt egner seg så godt til å bli animert.

Du kan skille mellom store animasjoner der f.eks. ting som flytter seg over større avstander, og mikroanimasjoner som f.eks en knapp som skifter farge, eller pulserer når du holder museknappen over den.

Mikroanimasjoner kan du trygt bruke uten at det blir vanskelig for brukere med nedsatt funksjonsevne å se på.  Større animasjoner bør du bruke med omhu.

Det er også tryggest for nettsidens hastighet å animere elementers gjennomsiktighet (at de toner inn) eller la dem skli rolig på plass, fremfor å endre på selve størrelsen til boksene

De fleste elementer kan animeres, men moderasjon er nøkkelen. Disse elementene egner seg best til subtile animasjoner:

• Knapper og lenker (fargebytte eller lett forstørrelse ved hover)
• Tekstbokser og ikoner (for å rette oppmerksomhet)
• Bilder og overskrifter (rolig inntoning når de scrolles inn i synsfeltet)

Hva slags triggere finnes det?

Hvilken trigger du bruker på en animasjon avhenger litt av hva du vil skal skje.  Her er en liten liste:

• Klikk: Som når du klikker på en knapp.
• Hover: Når du holder museknappen over et element.
• On load: Når siden laster inn.
• Scroll into view: Når du kommer til et vist sted på siden og du kan se elementet som skal animeres.
• Scroll: Når du scroller ned eller opp