Webflow

Interactions & animations

USER INTERFACE PROTOTYPING

Animations

Wat zijn animaties

🌈 Je pas eigenschappen aan zoals:
position, opacity, transforms (scale, rotate, translate),…
⏱️ Je maakt keyframes aan op een timeline
🔀 Veranderingen gebeuren a.d.h.v. interpolatie
👆 Triggers bepalen wanneer de animatie start
🐌 Easing bepaalt de snelheid van de animatie

Recap

= visuele overgangen van één toestand naar een andere, over een bepaalde tijd.

Keyframes

= Moment waarop een eigenschap een waarde heeft

Recap

Keyframe

Property

Ook wel States of Points genoemd in Webflow
Veelvoorkomende eigenschappen:
opacity, scale, move, rotate,...

Interpolation

Recap

🐌 De duration en easing curve geven de interpolatie vorm.
❌ Geen interpolation = schokkende / plotse overgang

= Toevoeging van extra states tussen een begin- en eindwaarde

Vb: Translate van 0% → 100%

Easing

= Zorgt voor vloeiendheid

Recap

Een realistische animatie gebeurt meestal niet linear
👟⚽️ Wanneer je op een bal schopt, zal de bal eerst versnellen, tot het een bepaalde topsnelheid haalt. Daarna gaat de bal traag uitbollen, tot het weer tot stilstand komt. ⚽️
Veelgebruikte easing curves zijn:
- Ease
- Ease-in-out
- Custom bezier

💡 Easing functions cheat sheet

Animaties in Webflow

💨 Quick animations
Simpele presets met beperkte controle
🎨 Custom animations
Volledige controle over easing, delays, loops,... via tijdlijn

In Webflow werk je met 2 soorten animaties:

Waarom animaties

Animaties zorgen ervoor dat een interface levendiger aanvoelt en helpen gebruikers hun weg te vinden.

👀 Voorbeeld: Skillex

Waar moet je klikken?
Wat is actief of geselecteerd?
Wat is de hiërarchie in de inhoud?

Triggers

Wat is een trigger?

Een trigger activeert een animatie

Page trigger = scroll, page load
Element trigger = hover, click, scroll into view

Recap

Vb: Klikken op element A → element B roteert

Page trigger

= Trigger die een element animeert wanneer er een verandering is in de state van de pagina

Mouse move in viewport
While page is scrolling
Page load
Page scrolled

Element trigger

= Trigger die, wanneer de gebruiker ermee in interactie treedt, een (ander) element animeert

Mouse click (tap)
Mouse hover
Mouse move over element
Scroll into view
While scrolling in view

Demo

Flowershop website

Quick Effects

Wat zijn Quick effects?

= Voorgedefinieerde animaties

Presets zoals hover effects of show/hide functionaliteiten
Goed voor eenvoudige micro-interactie
Eenvoudig op één element of op alle elementen met dezelfde Class toepasbaar
⚠️ Let op: beperkt aanpasbaar

Slide in view Example at 1'23"

Quick effect toevoegen

Selecteer het element waarop je een effect wilt toepassen
Klik op "+" naast Element trigger in het Interactions tabje in het rechter paneel
Selecteer de gewenste voorgedefinieerde actie (= animatie)
Test via de preview knop en pas eventueel (minimale) settings aan

Offset
De ruimte ten opzichte van de rand van het scherm

Oefening

We voegen enkele quick effects toe aan de pagina, zodat de content subtiel in-animeert. Zo nemen we de gebruiker stap voor stap mee in het verhaal.

Volledige briefing op Canvas - Stap 1 t.e.m. 3

Custom animation

= Je animaties volledig zelf samenstellen

Je kiest zelf de trigger en welke properties van een element worden geanimeerd
Werkt aan de hand van een timeline en keyframes (gelijkaardig principe als bv. AE)
Animaties herbruikbaar

Custom animation

Stap 1: Kies je trigger

Kan zowel met Element Triggers als Page Triggers
Specificeer je trigger: mouse click, page scrolling, page load...
Kies bij action voor "Start an animation"

Element trigger:
Eerste optie boven quick actions

Page trigger:
Enkel custom animations mogelijk

Custom animation

Stap 2: Maak een nieuwe animatie aan

Nieuwe animatie aanmaken

Als je al eerdere animaties maakte, kan je die hier aanduiden of zoeken in de zoekbalk
Om een nieuwe animatie te creëren: Klik op het + icoon rechstboven

Reeds aangemaakte animaties
(kan je via tandwiel ook aanpassen)

Custom animation

Stap 3: Stel je animatie samen

Je komt in een timeline-view terecht
Geef je animatie eerst bovenaan een naam
Voeg via het "+" icoon een property
toe die je wil animeren

Custom animation

Stap 4: Edit je timeline

Je krijgt automatisch een start- en eind keyframe
Selecteer een keyframe om waardes
aan te passen
Als de waardes op de twee keyframes gelijk zijn,
krijg je een ⚠️ te zien, er kan dan geen animatie
plaatsvinden (want punt A en B zijn gelijk)

Custom animation

Stap 4: Edit je timeline

Je kan meerdere properties toevoegen en
tegelijk animeren (bv rotate en opacity)
Je kan keyframes verslepen op de timeline

Custom animation

Stap 5: Test je animatie

Vink "Live Preview is On" aan en test je
design in de designer

Custom animation

Stap 6: Sla je animatie op

Klik bovenaan op "Save"
Je animatie staat nu aangeduid in het
interactions panel

Oefening

De hero laten we verschijnen via de Page Load trigger
We voegen een custom scroll animatie (parallax) toe op de afbeeldingen in de hero

Volledige briefing op Canvas - Stap 4 & 5

Hover animations

Ideaal voor kleine interacties op buttons, cards, forms...
Moeten in de eerste plaats een indicatie zijn voor de gebruiker dat het element interactief is

Animaties hoeven niet altijd complex te zijn, ook via
de hover state kan je animatie toevoegen

Recap

Hover animations
toevoegen

Selecteer de hover state
Speel met Effecten, bv dropshadow, 2D & 3D animaties...
Voeg een transitie toe om een animatie te verkrijgen tussen verschillende states
💡 Ga terug naar de default state om de transitie in te stellen

Recap