Waarom gebruik maken van een Lottie?

Wellicht heb je weleens gehoord van een Lottie. Maar wat is een Lottie nu eigenlijk en waarom zou je er gebruik van kunnen maken? Je leest het hieronder in onze blog.

Wat is Lottie?

Een Lottie is een snel en makkelijk toepasbaar geanimeerd bestand, waardoor de animaties op elk globaal platform te gebruiken zijn voor mobiel en desktop. Lottie animaties kunnen ook oneindig in of uitvergroot worden zonder te veranderen in kwaliteit.

Het bestand van een Lottie is een heel klein bestand. Vaak zijn de bestanden rond de 0 -500 kB per animatie, waardoor jouw website minimaal vertraagd wordt, vergeleken met een PNG of GIF. Deze bestanden zijn vaak een stuk groter en ze zien er ook minder vlot uit dan een Lottie bestand.

Waarom heet het Lottie?

Lottie is vernoemd naar de Duitse filmregisseuse Lotte Reiniger. Zij staat bekend om het maken van de eerste lange animatiefilm. In die tijd liep zij voor in haar stijl van animatie. Tot op de dag van vandaag is zij voor velen nog een inspiratie.

Waarom gebruik maken van een Lottie?

Het gebruik maken van een Lottie is sneller, efficiënter maar ook flexibeler in productie dan zijn alternatieven. De flexibiliteit die een Lottie bestand creëert, maakt de ideeën makkelijker om uit te werken. Dit komt door de ruimte en vrijheid die de workflow van Lottie creëert. Hierdoor is er ook meer ruimte voor creativiteit.

Hoe werkt een Lottie?

Het illustratie bestand of bestanden wordt geïmporteerd in After Effects, waar het wordt geanimeerd door middel van keyframes. Hier kan het beeld vervormen, verplaatsen en roteren, wat het beeld van statisch naar dynamisch kan maken. Door middel van het animeren van de illustratie wordt het doel en het verhaal verduidelijkt. Na het animeren wordt alles door een open source plugin (Bodymovin) getransformeerd naar een veelgebruikte webcode(JSON), wat ook wel een Lottie bestand heet. Een voorbeeld van een animatie is de bus die wij hebben gemaakt voor Homekeukens. Door middel van het geanimeerde busje die over het scherm rijdt, wordt op een speelse manier het stappenplan op de website verduidelijkt. Ook op de homepagina van Robuust marketing zijn onze werkzaamheden verduidelijkt door middel van animaties. De illustraties worden door de animatie meer uitgelicht en de pagina ziet er interactiever uit.

Al met al is Lottie een snellere, flexibele en fijnere manier om van illustratie naar animatie te gaan. Hierbij wordt kwaliteit en snelheid behouden. Een Lottie animatie levert niet alleen een mooier en scherper beeld, maar deze animaties spreken meer aan dan een statisch beeld. Het maakt het daarnaast ook interactiever en de kwaliteit is hoger dan een GIF of PNG. Daarnaast behoudt de animatie zijn scherpte bij het vergroten of verkleinen. De grootte van het bestand, vergeleken met de alternatieven, zijn bijna altijd 600x kleiner, waardoor de bezoeker geen vertraging in laadsnelheid heeft maar wel een verbetering in kwaliteit belevenis van de website. Zo wordt de ervaring die een potentiële klant heeft verbeterd op jouw website!

Zou jij leuke animaties willen hebben op jouw website? Neem contact met ons op en dan kijken we vrijblijvend samen naar de opties.