Animatie en interactie

Animatie en interactie is beweging die iets toevoegt in plaats van afleidt. Paginaovergangen, scroll-effecten, hover-reacties en microinteracties die het geheel af maken zonder de snelheid te slopen. Wij bouwen dit met GSAP en Barba.js, zodat het op elk apparaat soepel blijft en de site één geheel wordt.

Waarom beweging

Beweging vertelt waar iets vandaan komt en waar het naartoe gaat. Een menu dat openschuift, een pagina die overgaat in de volgende, een knop die reageert op de muis. Het maakt een site tastbaar. Te veel beweging maakt hem traag en vermoeiend. De kunst is weten wanneer je stopt.

Wat we bouwen

Paginaovergangen zonder herladen, zodat de site aanvoelt als een applicatie. Deze site doet dat met een pixelovergang. Scroll-animaties: onderdelen die verschijnen als je er langs scrollt, parallax die diepte geeft. Hover-effecten op knoppen, kaarten en menu's. Marquees, tickers en lopende logo's. Tekstanimaties die letter voor letter of regel voor regel opbouwen. En een navigatie die reageert op scrollen.

Hoe wij het doen

Alle animatie zit in één script, gebouwd op GSAP, dat we los van Webflow beheren. Daardoor is het snel, testbaar en herbruikbaar over projecten. Barba.js regelt de paginaovergangen. Elke animatie ruimt zichzelf op bij een paginawissel. Bezoekers die minder beweging willen, krijgen dat ook: de site respecteert de systeeminstelling voor beperkte beweging.

Wat het kost en hoe lang het duurt

Animatie is meestal onderdeel van een websiteproject en ontwerpen we tegelijk met de pagina's. Paginaovergangen achteraf toevoegen aan een bestaande site is een paar dagen werk, afhankelijk van hoeveel scripts er draaien. GSAP zelf is gratis.

Voor wie niet

Bij portals en applicaties met veel formulieren en inlog brengen paginaovergangen meer complexiteit dan ze opleveren. En telt op je site vooral laadsnelheid, dan houden we beweging klein.

Waar we het deden

Bistrobar Beaune: overgangen, scroll-effecten en een menu dat de sfeer van de zaak overneemt. Deze site zelf: pixelovergang, megamenu met meeglijdende highlight, magnetische knoppen.

Verder lezen

Het ontwerp waar de beweging bij hoort: webdesign. Snelheid bewaken: performance-optimalisatie.