Aangepaste animaties zijn bewegingseffecten die speciaal voor een product zijn ontworpen en gebouwd, in plaats van uit een bibliotheek met generieke effecten geplukt. Ze zijn afgestemd op de persoonlijkheid van het merk en op wat de interface daadwerkelijk doet, zodat de manier waarop een paneel inschuift, een grafiek zichzelf tekent of een knop reageert bewust en uniek aanvoelt voor dat product.
Denk aan het verschil tussen een standaard ringtone en een deuntje dat speciaal voor jou is geschreven. Allebei maken ze geluid, maar de een is onmiskenbaar van jou. Hetzelfde geldt hier: een op maat gebouwde laadanimatie of paginatransitie zet een product apart, terwijl een standaardeffect opgaat in de massa. Aangepaste animaties bouwen op dezelfde basis als bredere motion design en overlappen met kleine details als micro-animaties en hover-animatie. Onder de motorkap leunen de soepele exemplaren op eigenschappen die de browser goedkoop kan verplaatsen, vooral transform en opacity, die de grafische kaart afhandelt zonder de hele pagina opnieuw te tekenen. Animeer je breedte of positie op de naïeve manier, dan hapert de pagina op een middenklasse-telefoon. Tools als GSAP, Lottie of kale CSS passen elk bij ander werk, en de juiste keuze hangt af van hoe complex de beweging is en waar hij moet draaien.
De afweging is moeite, dus je zet ze het best in waar ze het meest tellen: een kenmerkende interactie, een onboardingstap, een moment dat speciaal moet voelen. Overal tegelijk gebruikt worden ze ruis, en ze horen altijd de reduced-motion-voorkeur te respecteren van mensen die beweging storend vinden.
Bij TopDevs reserveren we aangepaste animaties voor de momenten die een merk dragen, en bouwen we ze zo dat ze soepel draaien en toegankelijk blijven, niet animeren om het animeren.
