Webflow-animationer, der hjælper brugeren – og kan slås fra

En god animation viser, hvad der er sket, eller hvor man skal kigge hen. En dårlig forsinker indholdet, rykker rundt på siden eller kan ikke undgås af dem, der har bedt deres enhed om mindre bevægelse. Jeg bygger interaktioner i Webflow med de tre ting for øje: formål, hastighed og tilgængelighed.

Fortæl om dine animationer · Se priser og tilvalg

Princip
Bevægelse skal have et formål
Tilgængelighed
Reduceret bevægelse respekteres
Hastighed
Ingen animation, der skjuler sidens hovedindhold
Tillæg
Avanceret design og animationer fra 3.500 kr. ekskl. moms

Hvilke animationer hjælper – og hvilke koster

Animationstyper, deres nytte og risiko
TypeNyttig nårRisikoMin regel
Hover og fokus på knapper og linksBrugeren skal se, at noget kan klikkesFå; men fokus skal også ses uden musAltid med, og kortere end et halvt sekund
Åbn og luk (menu, spørgsmål og svar)Indholdet skifter tilstandKan være langsomt på mobilHold det enkelt; kontrollér på rigtig telefon
Indtoning ved scrollSektioner skal introduceres roligtKan skjule indhold og forsinke sidenAldrig på sidens øverste og vigtigste element
Parallax og scroll-styret bevægelseFortælling, hvor bevægelsen er budskabetKvalme og træge enheder; kan give layoutskiftKun hvor det betyder noget – og med et roligt alternativ
Baggrundsvideo og lang animationAtmosfære på en kampagnesideTung og forstyrrendeUndgå på sider, der skal være hurtige

Tabellen er mine tommelfingerregler, ikke en teknisk standard.

Tre krav, jeg stiller til alle animationer

  • Formål

    Hvis ingen kan sige, hvad bevægelsen hjælper med, er den pynt. Pynt kan være i orden, men den må ikke koste hastighed eller læsbarhed.

  • Hastighed

    Web.dev anbefaler at animere med CSS transform i stedet for at ændre position og størrelse, så animationen ikke udløser layoutskift. En animation, der skjuler sidens hovedbillede, forsinker det, der måles som LCP; derfor animerer jeg ikke sidens vigtigste element ind.

  • Tilgængelighed

    Mange har bedt deres enhed om mindre bevægelse. Webflows interaktioner kan indstilles til at tage hensyn til det (fx ved at springe til slutstillingen i stedet for at animere), og det er en del af opsætningen, ikke et tilvalg.

Det gør jeg selv på denne hjemmeside

Animationerne på oscarwinther.dk er skrevet i kode, ikke i Webflow Interactions, men principperne er de samme. De respekterer, hvad den besøgende har bedt om af bevægelse: Er reduceret bevægelse slået til, vises indholdet med det samme uden indtoning.

Jeg har også ændret på, hvor animation bruges, af hastighedshensyn. På artikelsiderne tones det øverste billede ikke ind, fordi det er sidens største element; det vises uden forsinkelse. Det er den slags afvejning, jeg tager i hvert projekt.

  • Reduceret bevægelse = indhold uden indtoning
  • Sidens øverste billede animeres ikke ind
  • Animationer testes på en rigtig telefon
  • Animation er ikke en erstatning for tydeligt indhold

Sådan arbejder vi med animationer

  1. Hvad skal bevæge sig – og hvorfor?

    Vi gennemgår designet og vælger de steder, hvor bevægelse hjælper. Resten bliver stillestående.

  2. Prototype og beslutning

    En enkel prototype viser, hvordan det føles, før den bygges ind. Det er billigere at fjerne en idé end en færdig interaktion.

  3. Byg i Webflow

    Interaktionerne bygges med klare udløsere og korte varigheder, og indholdet er synligt, selv hvis interaktionen ikke kører.

  4. Reduceret bevægelse og mobil

    Opsætningen testes med reduceret bevægelse slået til og på en rigtig telefon.

  5. Mål og justér

    Jeg tjekker hastighed før og efter. Hvis en animation koster mere, end den giver, fjerner vi den.

Hvad koster animationer i Webflow?

Animationer prissættes ikke som en separat ydelse, men som et tillæg til designet. Tillægget følger sidetallet.

  • 1–3 sider

    fra 3.495 kr. ekskl. moms

    Fx en enkel virksomheds- eller landingsside med forside, ydelser og kontakt.

  • 4–8 sider

    fra 9.495 kr. ekskl. moms

    En fuld virksomhedsside med flere ydelser, om-side og kontakt.

  • 9–15 sider

    fra 17.495 kr. ekskl. moms

    Større hjemmesider med mange ydelser, flere målgrupper eller indhold.

Tillæg

  • Avanceret design og animationer: 3.500 kr. (1–3 sider), 6.000 kr. (4–8 sider) eller 9.000 kr. (9–15 sider) ekskl. moms
  • Meget særlige effekter, 3D eller tung video vurderes individuelt

Alle priser er vejledende fra-priser ekskl. moms (25 %) og ikke et bindende tilbud. Du får en fast pris, tidsplan og plan, før vi aftaler et projekt.

Åbn prisberegneren · Kontakt mig

Spørgsmål om animationer i Webflow

Gør animationer siden langsommere?

De kan. Tunge effekter, store videoer og animationer, der skjuler sidens hovedindhold, påvirker hastigheden. Jeg måler før og efter og fjerner det, der ikke kan forsvares.

Kan animationer slås fra for dem, der ikke kan lide dem?

Ja. Webflow kan indstilles til at tage hensyn til brugerens enhedsindstilling for reduceret bevægelse, og jeg tester, at indholdet stadig kan læses uden bevægelse.

Er scroll-animationer dårlige for SEO?

Ikke i sig selv. Problemet opstår, hvis indhold først bliver synligt efter en animation, eller hvis siden hopper rundt. Så koster det på hastighed og oplevelse.

Kan jeg få en animation fra en anden side kopieret?

Jeg kan bygge noget i samme ånd, men jeg kopierer ikke andres design eller kode. Beskriv, hvad bevægelsen skal hjælpe med.

Hvad koster animationer i Webflow?

Hjemmesider starter fra 3.495 kr. ekskl. moms for op til tre sider, fra 9.495 kr. for 4–8 sider og fra 17.495 kr. for 9–15 sider. Tillægget til avanceret design og animationer afhænger af sidetallet. Du kan selv prøve det af i prisberegneren, og du får altid en fast pris, før vi går i gang.

Animation, hastighed og design

Skal bevægelsen hjælpe – ikke genere?

Beskriv, hvad du gerne vil have til at bevæge sig, og hvorfor. Jeg foreslår en løsning, der ikke går ud over hastighed og tilgængelighed.

Direkte til mig: +45 20 71 02 89 · ow@oscarwinther.dk

Beregn din pris · Kontakt mig