Framer
Interaction & animation
UI/UX 3
Waarom gebruiken we animaties?
Feedback
Dankzij animaties reageert de interface op onze acties.
Relaties
Animaties helpen gebruikers een 'mental model' te bouwen.
Aandacht
Motion trekt sneller de aandacht dan bv. kleur of tekst.
Emotie
Animaties ondersteunen merkbeleving.
Caveats
Accessibility
Performance
Afleidend
Mobile vs desktop
SEO
Kan snel verouderen
Als alles beweegt, beweegt niets meer...
Soorten animaties
Micro Interactions
Kleine reacties op gebruikersacties
Buttons, links, save, like, ...
Geven feedback en
verduidelijken interacties
Stateful Animations
Overgangen tussen verschillende 'states' van eenzelfde component
Accordion, tabs, toggle, mobile menu
Tonen een status, niet enkel een reactie
Behouden van context
Toont relaties tussen states
Helpt mental model
Page transitions
Animaties tussen pagina of content changes
Pagina fades, modals, onboarding, section reveals
Geven gevoel van flow
Verzachten de navigatie
Behoud van context
Scroll animations
Elementen reageren op de scroll positie
Sections reveals, parallax, sticky sections
Storytelling
Sturen de focus
Voegen dynamiek toe
Motion sickness
Continuous animations
Ambient animations
Moving gradients, floating shapes, loading animations
Interactie is geen vereiste
Voegen sfeer toe, diepte en brand experience
Drag & Physics
Versleepbare elementen
Cards, carousels, sliders, ...
Is vaak zowel interactie als state change,
Vooral voor mobiele interafaces
Triggers &
transitions
Animaties toevoegen
Framer
Overflow
Framer
Waarom start een animatie?
Trigger
Hoe loopt een animatie?
Transition
3. Framer: Interaction & animation
By Lecturer GDM
