Animaties op het internet, en dan vooral microanimaties, zijn meer dan alleen visuele opsmuk. Ze vormen vaak de kers op de taart in de afwerking van professionele weboplossingen. Mits goed toegepast, kunnen ze daadwerkelijk bijdragen aan de gebruikerservaring. Denk aan subtiele visuele feedback die een interface prettiger en duidelijker maakt in gebruik. Vaak onderschat, vaak niet bewust opgemerkt, maar wel degelijk van waarde. En precies daar komt een techniek als Lottie om de hoek kijken.
Wat is Lottie eigenlijk
Als je met animaties werkt, kom je vroeg of laat Lottie tegen. Het wordt vaak aangeleverd door designers als een .json of .lottie bestand, en het idee is simpel, een lichte, schaalbare animatie die je op web, mobiel en apps kunt gebruiken zonder zware video’s of GIFs.
Technisch gezien is Lottie een JSON-gebaseerd formaat waarin vector shapes, keyframes, timing en easing zijn opgeslagen. Het lijkt een beetje op SVG, maar het is geen SVG. Het is eerder een beschrijving van een animatie, vergelijkbaar met hoe After Effects intern werkt. Dat is ook geen toeval, want Lottie wordt meestal geëxporteerd vanuit Adobe After Effects via een plugin.
Hoe werkt het op het web
Een belangrijk detail is dat Lottie niet native door browsers wordt ondersteund. Je kunt het dus niet simpelweg in een img-tag stoppen zoals een PNG of SVG. Om een Lottie animatie af te spelen heb je een JavaScript player nodig, meestal lottie-web.
In de praktijk betekent dit dat je een script moet laden en een container element op je pagina zet waarin de animatie wordt gerenderd. Die rendering gebeurt vaak als SVG of canvas, afhankelijk van de instellingen. Zonder die player gebeurt er niets.
Dat maakt Lottie fundamenteel anders dan bijvoorbeeld SVG of video. Het is geen bestand dat “gewoon werkt”, het is een formaat dat een runtime nodig heeft. Voor de echte kenners; het doet een beetje denken aan Macromedia Flash van vroeger. Later overgenomen door Adobe. En inmiddels compleet verdwenen omdat het erg onveilig was. Na Flash kwam er nooit echt een lekker HTML5-alternatief met IDE voor designers.
Bestandsformaten en waarom het soms “binair” lijkt
Er zijn meerdere varianten van Lottie bestanden. De meest bekende is een plain JSON bestand, dat gewoon leesbaar is. Maar je hebt ook .lottie bestanden, dat zijn in feite gecomprimeerde archieven, vergelijkbaar met een zip. Als je zo’n bestand in een text-editor opent, lijkt het binair of encoded. Maar als je de .zip-extensie toevoegd achter .lottie, dan kun je het gewoon uitpakken. Dan zie je de rauwe JSON- en asset-bestanden.
Dit is geen beveiliging of bescherming van het ontwerp. Het is puur packaging en compressie. In tegenstelling tot bijvoorbeeld gecompileerde code is dit niet bedoeld om reverse engineering tegen te gaan.
Controle over de animatie
Een van de sterke punten van Lottie is dat je via JavaScript controle hebt over de animatie. Je kunt starten, stoppen, loopen, naar een specifiek frame springen en events koppelen. Dat maakt het interessanter dan een video, waar je minder fijnmazige controle hebt.
Tegelijkertijd betekent dit ook dat je afhankelijk bent van JavaScript. Je kunt niet simpel met CSS een hover animatie aanpassen zoals bij SVG. Alles loopt via de player API.
Hoe groot en “lichtgewicht” is het echt
Lottie wordt vaak gepresenteerd als lichtgewicht alternatief voor GIFs en video. Dat klopt deels, maar het hele plaatje is belangrijk. Een animatiebestand kan inderdaad klein zijn, bijvoorbeeld een paar kilobyte JSON, maar je moet ook de JavaScript player meerekenen.
De lottie-web library is grofweg tientallen kilobytes, afhankelijk van minificatie en compressie. In deze tijd prima te behappen. Maar in veel gevallen zit je dus alsnog aan een extra payload die je anders niet nodig had bij bijvoorbeeld pure SVG of een simpele CSS animatie.
Compatibiliteit en “werkt het overal”
Dit is een punt waar developers alert op moeten zijn. Lottie werkt goed in moderne browsers en in apps waar je de juiste libraries kunt gebruiken. Maar het is niet universeel zoals videoformaten of andere webformaten dat zijn.
Als een omgeving geen JavaScript ondersteunt, of een beperkte runtime heeft, dan houdt het op. Denk aan bepaalde embedded systemen, oudere devices, of minimalistische browsers. In die zin is bijvoorbeeld een MP4 nog steeds veel robuuster.
Als iets echt overal moet werken, zonder afhankelijkheden, dan blijft video of een statische fallback de veiligste keuze.
Vendor lock-in en workflow
Formeel is Lottie een open formaat en de spelers zijn open source. Toch zit er een vorm van lock-in in de workflow. De meeste animaties worden gemaakt in After Effects en geëxporteerd via specifieke plugins. Niet alle features van After Effects worden ondersteund, dus je zit ook nog eens vast aan wat de export kan.
Dat betekent dat developers afhankelijk worden van hoe designers hun werk aanleveren, en designers afhankelijk zijn van een specifieke toolchain. Het is geen harde lock-in, maar wel een praktische afhankelijkheid.
Vergelijking met alternatieven
Als je het naast andere technieken legt, zie je duidelijke verschillen. SVG met CSS of JavaScript is volledig native in de browser, heeft geen runtime nodig en geeft je directe controle via webstandaarden. Voor eenvoudige animaties is dat vaak de betere keuze.
Video, zoals MP4, is extreem compatibel en efficiënt voor complex beeld. Het mist interactiviteit, maar werkt wel vrijwel overal zonder extra code.
Lottie zit daar tussenin. Het biedt meer controle dan video en kan complexere animaties aan dan pure CSS, maar vraagt een extra laag en introduceert afhankelijkheden.
Wanneer is Lottie een goede keuze
Lottie is interessant voor micro-animaties in interfaces, denk aan iconen, loaders en kleine visuele feedback. Ook in mobiele apps kan het goed werken omdat daar native libraries beschikbaar zijn en performance voorspelbaar is.
Voor marketing visuals kan het een beter alternatief zijn dan GIFs, omdat het scherper en vaak kleiner is. Toch lijkt het nét niet de krachtige open oplossing te zijn die we zo hard kunnen gebruiken in HTML5.
Wanneer zou je het vermijden
Als compatibiliteit cruciaal is, of als je zonder JavaScript wilt werken, dan is Lottie geen goede keuze. Ook voor simpele animaties is het vaak overkill. Dan ben je beter af met SVG of CSS. Het zit een beetje tussen geanimeerde SVG en MP4 in.
Voor core content, SEO-relevante elementen of alles wat echt robuust moet zijn op elk apparaat, is het verstandig om een fallback te hebben of een andere techniek te kiezen. Maar inclusief static fallback is het prima voor microanimaties. Met elke extra microanimatie is de pijn van de javascript-runtime tevens verzacht omdat het per animatie overhead bespaart.
Ten slotte
Of moet ik zeggen "tot slottie"? Afijn, lottie is interessant, maar geen wondermiddel. Het lost een specifiek probleem op, namelijk het efficiënt tonen van complexe vectoranimaties met controle, maar introduceert tegelijkertijd een runtime, extra gewicht en afhankelijkheid van tooling.
Het voelt niet als een nieuwe webstandaard, eerder als een brug tussen designtools en development. Dat kan handig zijn, maar het is goed om kritisch te blijven en niet automatisch te kiezen voor wat de tooling aanlevert.
Als developer is het verstandig om Lottie te begrijpen en te kunnen toepassen, maar ook om alternatieven paraat te hebben. Het web is sterk geworden door open standaarden, en alles wat daarvan afwijkt verdient een gezonde dosis scepsis.