Je laat je website bijwerken door een webbouwer of door een AI-tool als Lovable. Dan komt het voorstel: zullen we er iets in zetten dat beweegt? Een geanimeerd logo, een golvende achtergrond, een 3D-product dat je met de muis kunt draaien. In de demo ziet het er goed uit. Wat er nergens bij staat, is hoeveel zwaarder je pagina ervan wordt. Wij hebben dat op 4 november 2026 gemeten voor de animatietools die nu in elk designlijstje opduiken: Lottie, Rive, Spline, Unicorn Studio, Jitter en de paginaovergangen die de browser zelf kan. Tussen de lichtste en de zwaarste speler zit een factor 28.
Wat een animatie aan je site toevoegt
Het zwaarste blok uit onze meting weegt vijf keer zoveel als een complete pagina van deze site. We bouwden per tool een testpagina met alleen die tool en een officieel voorbeeld uit de eigen documentatie. Daarna telden we wat er over de lijn ging.
Een complete reviewpagina van AIPlatformMKB, met tekst, lettertypes en beeld, kwam uit op 214 KB. Daarvan is 24 KB JavaScript. Daar zitten de paginaovergangen van deze site al in. Een Rive-animatie in de volledige versie zet daar ruim 1,1 MB bovenop.
Beginner-tip: een KB (kilobyte) is een maat voor hoeveel data een bezoeker moet downloaden. 1.000 KB is 1 MB. Op een snelle wifi merk je dat nauwelijks, op een telefoon met één streepje bereik in de trein wel: dan staat je bezoeker naar een leeg vlak te kijken.
Waarom het verschil zo groot is: Rive en de nieuwe Lottie-speler van LottieFiles sturen een complete tekenmachine mee als WebAssemblyWebAssemblyEen bestandsformaat waarmee een browser programmacode bijna zo snel uitvoert als een gewoon programma op je computer. Animatietools als Rive en de nieuwe Lottie-speler sturen zo een complete tekenmachine mee naar je bezoeker.Hele uitleg: WebAssembly (een bestand met programmacode die de browser bijna zo snel uitvoert als een gewoon programma). Bij Rive is dat bestand alleen al 932 KB. Spline en Unicorn Studio tekenen met WebGLWebGLDe techniek waarmee een website de grafische kaart van je bezoeker gebruikt om te tekenen, bijvoorbeeld voor 3D-scènes of bewegende lichteffecten. Tools als Spline en Unicorn Studio werken ermee.Hele uitleg: WebGL, dus via de grafische kaart van de bezoeker. De oude lottie-web-speler doet het met gewone JavaScript en een tekening in de pagina zelf. Daarom is die zo licht.
Per tool: waarvoor hij is en wat hij kost
Elke tool is goed in iets anders. Het gewicht hoort bij wat je ermee wilt.
Lottie (LottieFiles)
Lottie is een bestandsformaat voor kleine vectoranimaties: een bewegend icoon, een logo dat zich opbouwt, een laadanimatie. Er zijn twee spelers. De oudere lottie-web kost in de lichte versie 40 KB. De nieuwere dotLottie-speler van LottieFiles kwam met het voorbeeld uit hun documentatie op 510 KB, waarvan 475 KB WebAssembly. Het animatiebestand zelf was in dat voorbeeld 3 KB.
De gratis animaties in de bibliotheek van LottieFiles vallen onder de Lottie Simple License: je mag ze zakelijk gebruiken zonder de maker te noemen. Een betaald plan (vanaf $19,99 per gebruiker per maand, jaarlijks gefactureerd) is voor wie zelf animaties maakt en beheert. Om er één op je site te zetten heb je het niet nodig.
Rive
Rive maakt animaties die reageren op de bezoeker: een knop die meebeweegt met de muis, een mascotte die zwaait als je ergens op klikt. Dat is de kracht en ook het gewicht. De volledige speler kwam met het officiële voorbeeldbestand op 1.116 KB. De lichte versie kost 506 KB, maar toont geen tekst die in Rive is gemaakt en speelt geen geluid af.
Gratis exports spelen eerst een Rive-splashscreen af. Dat haal je weg met het Cadet-plan van $9 per gebruiker per maand. De spelers zelf zijn open source.
Spline
Spline is voor 3D-scènes in de browser, zonder dat je kunt programmeren. Exporteer je een scène als webblok, dan krijg je een stukje code met de Spline-viewer. Alleen dat script was in onze test al 987 KB, nog vóór de scène zelf. Wie een ontwikkelaar heeft, kan de kale runtime gebruiken: 605 KB, verdeeld over 53 losse bestanden.
Het gratis plan zet een Spline-logo in je scène. Het Hobby-plan haalt dat weg bij 3D-webexports en kost $12 per maand bij jaarbetaling of $15 per maand.
Unicorn Studio
Unicorn Studio maakt bewegende achtergronden en lichteffecten met WebGL. Het is opvallend licht: 79 KB voor script en scène. Op het gratis plan laadt daar een Unicorn-logo van 53 KB bij, samen 132 KB.
Het gratis plan geldt alleen voor persoonlijk en niet-commercieel gebruik, met maximaal acht publicaties. Een bedrijfssite valt daar buiten. Je hebt dan het Legend-plan nodig: $20 per maand of $168 per jaar. Let hier extra op als je met AI bouwt. Unicorn Studio zet een lijst voorbeeldprojecten online die bedoeld is voor AI-agents, zodat die ze kunnen voorstellen en inbouwen. Zo’n effect kan dus in je site belanden zonder dat iemand naar de licentie heeft gekeken. Of je een landingspagina überhaupt zelf moet laten bouwen door AI, lees je in Je landingspagina vibe-coden?
Jitter
Jitter is geen websitetool. Je animeert er ontwerpen mee en exporteert ze als video, GIF of Lottie, handig voor een korte social post. Het gratis plan exporteert tot 720p bij 30 beelden per seconde, met een Jitter-watermerk en drie werkbestanden (concepten zijn onbeperkt). Pro kost €15 per gebruiker per maand bij jaarbetaling, exclusief btw. Exporteer je naar Lottie en zet je dat op je site, dan geldt het gewicht van de Lottie-speler.
Paginaovergangen via de browser
Wil je alleen dat een nieuwe pagina zacht in beeld schuift in plaats van te verspringen? Dat kan de browser zelf, met één regel CSS en zonder extra download:
@view-transition { navigation: auto; }Dit werkt in Chrome en Edge vanaf versie 126 en in Safari vanaf 18.2, voor pagina’s binnen je eigen domein. Firefox ondersteunt het nog niet. Daar wisselt de pagina gewoon zonder overgang, er gaat niets stuk.
Waar het misgaat
Het gewicht staat nergens op het etiket. Een insluitcode van Spline of Rive ziet eruit als drie regels. Wat die regels binnenhalen, zie je pas als je gaat meten.
- Het gratis plan past niet bij je bedrijf. Bij Unicorn Studio mag je het gratis plan niet commercieel gebruiken. Bij Rive, Spline en Jitter krijg je een logo of watermerk in beeld.
- WebGL kost meer dan bytes. Spline en Unicorn Studio laten de grafische kaart doorwerken zolang het blok in beeld is. Dat kost een telefoon stroom. Dit hebben wij niet gemeten.
- Bovenaan je pagina weegt het het zwaarst. Google kijkt bij de Core Web VitalsCore Web VitalsDrie meetwaarden waarmee Google beoordeelt hoe prettig een pagina laadt en reageert: hoe snel het grootste deel zichtbaar is, hoe snel de pagina op een klik reageert en of de inhoud tijdens het laden verspringt.Hele uitleg: Core Web Vitals onder meer hoe snel het grootste deel van je pagina zichtbaar is. Een zware animatie in de bovenste helft drukt precies die laadsnelheid.
- Ons voorbeeld is niet jouw animatie. Het Rive-voorbeeld was 59 KB, het Lottie-voorbeeld 3 KB. Een drukke animatie van je eigen ontwerper kan flink groter uitvallen.
Wat het kost
Het geld is meestal het kleinste deel. Wil je geen logo of watermerk, dan zit je op $9 (Rive), $12 tot $15 (Spline), $20 (Unicorn Studio) of €15 (Jitter) per maand. Een gratis Lottie-animatie kost niets.
De tijd zit in het maken: een eigen animatie laten ontwerpen kost uren van een ontwerper, een kant-en-klare uit een bibliotheek kost een kwartier. En de rekening voor de downloads betaalt je bezoeker: 1,1 MB extra is op een mobiel abonnement niet veel, maar op een trage verbinding wel merkbaar.
Voor wie wel, voor wie niet
Wel voor jou als:
- je een klein bewegend logo of icoon wilt: neem Lottie met de lichte speler;
- interactie iets uitlegt wat tekst niet kan, zoals een configurator of een stap in je product: dan is Rive het gewicht waard;
- je een fysiek product verkoopt dat mensen van alle kanten willen zien: dan kan een 3D-scène in Spline je verkoop helpen.
Niet voor jou als:
- je site nu al traag laadt of veel van Google-verkeer leeft;
- de animatie vooral mooi is en niets uitlegt;
- je een bedrijfssite hebt en het gratis plan van Unicorn Studio wilde gebruiken.
Zo begin je
Meet eerst hoe zwaar je site nu is. Plak je adres in PageSpeed Insights en kijk naar de laadtijd op mobiel. Wil je daarna beweging toevoegen, begin dan met de CSS-regel voor paginaovergangen of met één Lottie-animatie. Werk je met een webbouwer of een AI-tool, geef dan deze opdracht mee:
Voeg deze Lottie-animatie toe met de lichte speler lottie_light.min.js van
lottie-web, niet met de dotLottie-speler. Laad het script pas als het blok in
beeld komt. Toon een stilstaand beeld voor bezoekers die in hun systeem
"minder beweging" hebben ingesteld (prefers-reduced-motion).Meet daarna opnieuw. Is het verschil klein, dan heb je de beweging zonder de rekening. Wie zijn site met AI laat bouwen, leest ook even wat je bij een Lovable-app moet dichttimmeren.
Hoe we gemeten hebben
We maten op 4 november 2026 in een Chromium-browser. Per tool bouwden we een testpagina met alleen die tool en het voorbeeld uit de eigen documentatie: het voertuigenbestand van Rive, de voorbeeldanimatie van LottieFiles, de voorbeeldscène uit de Spline-documentatie en het project “Fluted Gradient” van Unicorn Studio. We telden het gecomprimeerde netwerkverkeer bij de eerste keer laden. Bestanden waarvan de server de grootte niet aan de browser doorgeeft (de WebAssembly van Rive en de voorbeeldbestanden) maten we los, met dezelfde compressie die een browser vraagt.
Versies: lottie-web 5.13.0, dotlottie-wc 0.11.1, Rive canvas en canvas-lite 2.49.3, Spline viewer en runtime 2.0.134, Unicorn Studio 2.4.4. De Spline-viewer laadde in onze testopstelling de scène niet, daarom staat daar alleen het script. De vergelijkingspagina is onze review van Moneybird, zonder het statistiekscript. We hebben bij geen van de tools een account aangemaakt. De prijzen komen van de officiële prijspagina’s, gecontroleerd op dezelfde dag.