Kaj Rietberg

Mountainbike en Front-end enthousiast

Animatie op het web

Datum geplaatst:

In dit artikel (opsomming) over animatie staan mijn verzamelde bronnen en opmerkingen die naar mijn idee belangrijk of handig zijn om meer te weten te komen over animatie op het web. Als ik nieuwe bronnen vind plaats ik deze hier. Mocht jij een interessante bron hebben meld het mij, mijn contactgegevens staan onderaan de pagina. Dit artikel heb ik geschreven in 2018 en aangevuld in juli 2023. De artikelen die genoemd worden zijn van voor 2018, maar volgens mij wel relevant. De tools die je gebruikt willen in de webwereld snel veranderen, zo ook CSS, Canvas en WebGL en wat daarbij mogelijk is. Maar degene die ik noem in dit artikel bestaan in 2023 nog steeds. De artikelen beschrijven meer de basis van bewegen en het gebruiksgemak. Dat zijn principes die nog steeds overeind staan.

Het is geen perfect geschreven artikel maar een naslagwerk voor mijzelf en hopelijk heeft iemand anders er ook nog baat bij.

Animatie of motion design is...

Animatie is dat iets veranderd naar een andere toestand. Kan een beweging zijn of een andere vorm of een andere kleur.
Motion is beweging, iets zie je bewegen. Het verschil tussen motion en animatie is dat bij een animatie iets kan veranderen, maar dat hoeft geen beweging te zijn. Denk daar maar eens over na.
Tegenwoordig is Motion Designer een apart vak geworden. Er zijn bedrijven die Motion designers in dienst hebben, zoals Google.

Animatie en motion op het web bestaan naar mijn optiek uit 3 verschillende vaardigheden.

  • De vaardigheid van het animeren/laten bewegen. Wat is een goede animatie/beweging? De rol van motion designer.
  • Op welke manier helpt het de gebruiker, dus user experience. De rol van UX-er.
  • Hoe laat je het bewegen op de webpagina, dus welke tools gebruik je. De rol van developer.

Hoe beweging en/of animatie goed overkomen staat beschreven in The 12 Principles of Animation.

Wat doet beweging?

Het neemt de bezoeker mee in de actie die het net deed en zorgt voor focus en orientatie waar je bent. De bezoeker heeft het gevoel dat het interacteert met echte elementen i.p.v. met een scherm. Schermen met beweging voelen meer levend en menselijk waardoor digitale producten tot leven komen. Bedenk daarbij wel dat levendigheid voor kinderen en jongeren anders is dan voor ouderen.
Beweging vertelt een verhaal. Het zorgt er voor dat een interactie niet uit losse onderdelen bestaat.

Meer hierover in het artikel van UX Planet; Motion in UX Design en Google Design; Making Motion Meaningful.

Waarom beweging gebruiken?

Beweging is bedoeld om het gebruiksgemak te verbeteren. Overgangen verlopen soepeler. Het zorgt ervoor dat het natuurlijker overkomt.
Kijk welke vragen een bezoeker zich kan stellen op je pagina en laat daar beweging op aansluiten. Voorbeelden van deze vragen zijn:

  • Wat moet ik hierna doen? De animatie neemt je mee in het proces van wat er moet gebeuren.
  • Hoe weet ik of het formulier juist ingevuld is?

Motion in webforms

We weten nu wat motion is en hoe we dit online kunnen gebruiken. In mijn oude werkveld van zorgverzekeringen aanvragen zijn webformulieren belangrijk. Je vraagt een zorgverzekering aan en daarvoor moet je verschillende vragen beantwoorden middels een webform. Mijn vraag hierbij is: "Hoe kunnen we een webformulier gebruiksvriendelijker maken, prettiger om in te vullen?". Ik denk dat Motion hierbij een rol kan spelen. Bewegingen kunnen een webformulier levendiger maken, het natuurlijker laten aanvoelen, de menselijke interactie meer in verwerken dan statische webformulieren doen.

Hoe doen we dit dan? Val Head laat in een screencast zien hoe je dit kan toepassen.

Hoe zet je beweging in een design zodat een front-end developer het weet?

  • Zet erbij welke waarden veranderen en met welke eenheden. Denk daarbij aan: easing, timing, properties (de wat). Bij tijd zijn er zelfs al onderzoeken gedaan welke tijd het beste gebruikt kan worden voor welke onderdelen.
  • Schets wat er moet bewegen en hoe
    In dit interview beschrijft Eva-Lot hoe ze animaties schets. Ze vertelt over een trigger die zorgt voor de animatie, de actie die daarna komt en als laatste de kwaliteit die laat zien hoe het gebeurd. Elk van deze heeft andere schets onderdelen en kan je op een bepalde manier aanduiden zodat het geheel uiteindelijk duidelijk wordt wat je als designer precies bedoelt.
    Schetsen is ook handig om eerste ideeen te bedenken en te bespreken met anderen.
  • Gebruik storyboards Storyboard pdf van Rachel Nabors om te gebruiken
  • Of probeer een gif van de beweging/animatie te maken. En zet de waarden er wel bij.

Meer hierover staat in het artikel van Rachel Nabors Communicating Animation.

De tools

Bovenstaand gaat meer over het bedenken en het ontwerpen van animatie voor een webpagina. Als je dit bedacht hebt en in een design verwerkt komt het volgende onderdeel en dat is de animatie bouwen. Je kan dit met CSS doen met daarnaast JavaScript libaries. Het is niet dat het ene de ander bijt. Er zijn verschillende JavaScript libraries die je kan gebruiken.

CSS

Bij CSS werk je met de transition property en/of de animation property (en de sub-properties) waarbij de @keyframes belangrijk is.

CSS of JavaScript

JS libraries

Voorbeelden:

Performance van web animaties

CSS GPU Animation: Doing It Right. Als je animaties gaat gebruiken op een website vraag je meer van de rekenkracht van de webbrowser en de computer. Denk er dus goed overna of het handig is wat je doet of dat het op een manier kan die minder rekenkracht nodig heeft.

Skills:

  • Kennis van animatie design
  • UX: wanneer gebruik je wel en niet animatie.
  • CSS
  • JavaScript
  • SVG: svg afbeeldingen kan je heel goed animeren.
  • Webanimation API: animeren met JavaScript en in de webbrowser ingebouwde elementen
  • Toegankelijkheid van web animaties: hierdoor maak je een animatie toegankelijk voor mensen die bijvoorbeeld blind zijn, zij willen ook wel de eravring van een animatie ondergaan.

Tools

Een kleine opsomming van tools.

Een al oudere beschrijving van technieken/tools van Sarah Drasner: A Comparison of Animation Technologies.

Boeken

De hier genoemde boeken zijn al wel ouder, maar volgens mij nog wel relevant.

Conferentie talks:

Mensen om te volgen

Nieuwsbrieven

Design bureau’s die werken met animatie/motion in de webbrowser:

Wil je reageren op dit bericht, hit me up on Linkedin of mail mij kaj@kajrietberg.nl.

Ik ben . Een Front-end enthousiast in Nederland. Ik bouw toekomstbestendige en onderhoudsvriendelijke websites en applicaties met HTML, CSS en JavaScript. Datavisualisaties is een onderwerp waar mijn interesse naar uitgaat.