5. Webflow: Interacties & Animaties

Webflow

Interactions & animations

LOW CODE

Motion

Motion matters

🧭 Aandacht sturen: de blik leiden naar wat belangrijk is
✅ Feedback geven: bevestigen dat een actie gewerkt heeft (knop, formulier, dropdown)
💅 Persoonlijkheid toevoegen: een bepaalde sfeer creëren

Animaties en interacties kunnen de UX/UI van je site tot een hoger niveau tillen. Goede animaties hebben een doel:

Gebruiker sturen: Motion legt klemtoon op de kaartjes

Motion matters

Voorbeeld

Feedback geven: Cursorbeweging beklemtonen + audio visualiseren

Motion matters

Voorbeeld

Sfeer scheppen: Futuristische tone of voice versterken

Motion matters

Voorbeeld

Hou het intentioneel

Vraag jezelf altijd: "Waartoe dient deze animatie?"
Laat je animatie achterwege als...:

❌ ...het puur decoratief/verwarrend is
vb: "hover" op een niet-interactief element

❌ ...het de gebruiker afleidt van de kerninhoud

❌ ...het de pagina vertraagt zonder meerwaarde

A11y

Webflow detecteert automatisch prefers-reduced-motion en past animaties aan
Inhoud moet altijd leesbaar zijn zonder animaties
Vermijd plotse of constante beweging
Zorg dat focus states "Focus (Keyboard)" zichtbaar blijven

Performance

Animeer bij voorkeur transform en opacity
Vermijd layout-properties die layout-shifts veroorzaken: width, height, top, left
Beperk het aantal elementen dat tegelijk beweegt
Test op echte apparaten: desktop, tablet, mobile

Oefening 4.1: Motion - inspiratie

Zoek minstens 5 websites met animaties die je aanspreken.

Denk na over:

Wat beweegt er precies?
Wanneer beweegt het? (laden, scrollen, hover…)
Waarom werkt het, of waarom net niet?
Zou iets soortgelijks passen in jouw portfolio?

Verzamel screenshots + URL in Figma.

Meer info: Zie Canvasbriefing 4.1 Motion - inspiratie

Motion in Webflow

Drie manieren om motion in Webflow toe te voegen:

Manier	Wat?	Wanneer?
1. CSS Effects	Eenvoudige transities	Eenvoudige states (hover, focus-visible, keypressed)
2. GSAP-interactions	Tijdlijn-sequenties	Entrance effecten Scroll animaties
3. Integraties	Vector-animaties Interactieve 3D-elementen	Micro-interacties Brand design

CSS Effecten

Feedback: CSS hover effects op interactieve elementen

CSS Effects

Voorbeeld

CSS states & transitions

Eén stap: van A naar B
Instellen via Style-panel → Transitions
Directe visuele feedback
Snel en eenvoudig

CSS effecten

1. Property aanpassen
Op pseudo class (state)

2. Transition toevoegen
Op default state

GSAP Animaties

Aandacht sturen: GSAP-powered entrance effecten om stap voor stap elementen in beeld te laten komen.

GSAP-interactions

Voorbeeld

GSAP-powered Interactions

= multi-step animaties op een tijdslijn

Vervangt de "Classic interactions" in Webflow
O.b.v. GSAP JavaScript library
Mogelijk om meerdere elementen te animeren in volgorde of tegelijk
Direct timing, easing en pauzes aanpassen op de canvas

GSAP-powered Interactions

De basisprincipes van motion die je in Motion Graphics hebt geleerd blijven volledig van toepassing:

Timing, easing, anticipation, follow-through…

Het canvas verandert: van After Effects naar een geïntegreerde tool in Webflow
Zelfde principes gelden voor animaties op websites

Basisbegrippen

Trigger

= Een trigger activeert een animatie

Vb: Klikken op element A → element B roteert

Target

= Het element dat je animeert

Vb: Klikken op element A → element B roteert

Filter

Je kan je target nog meer verfijnen:

Het eerste element met class "Icon" in de link block (= trigger)

Alle elementen met classes "Star" & "Filled" die een direct child zijn van elementen met class "Review"

Action

= Wat er met het target gebeurt
Vb: fade-in, scale, opacity verlagen...

Koppel aan een trigger
Bestaat uit één of meerdere stappen op de tijdslijn
Je kan starten van presets en Integraties (zie later)

Custom action koppelen

1. Trigger instellen

2. Target(s) selecteren

3. Action instellen

Oefening 4.2: Click animatie

Maak de button na
Voeg een :hover, transitie en click animatie toe
Uitgebreide uitleg op canvas

De tijdlijn

Timeline

= visueel overzicht waar je acties rangschikt en verfijnt

Timeline settings

Duration: hoe lang de actie duurt
Start: delay, de pauze vóór een actie start
Overlap: een actie laten beginnen vóór de vorige eindigt
Stagger: om meerdere elementen kort na elkaar te laten animeren.
Ideaal voor lists, cards, tekst.

Easing

= Zorgt voor vloeiendheid van de animatie

Veel GSAP presets beschikbaar

Ease-out
voor entrances (snel starten, zacht landen)
Ease-in
voor exits (langzaam starten, dan sneller)
Ease-in-out
voor bewegingen die zacht starten en eindigen

Sequencing & timing tips

⌛️ Duration: kleine elementen ~0.4–0.6s, grotere iets langer
🏁 Overlap: start volgende element 0.1–0.2s voor vorige eindigt
⏱️ Stagger: herhalende elementen (cards, icons): 0.05 – 0.15s
☎️ Beats: een korte pauze vóór een CTA vergroot de impact

💨 Easing: houd gelijk binnen dezelfde sequentie
🧘 Less is more: animeer alleen wat betekenis toevoegt

Oefening 4.3 Hero animatie