Lottie: bevegelige logoer og bilder på nettsiden
Studioet
Logoen lærer å bevege seg
Motion-designeren drar i tidslinjen mens logomerket folder seg ut på den store skjermen, én form om gangen. Det er ikke en video hun lager. Det er en beskrivelse av bevegelsen: former, kurver og tider lagret som tekst i en JSON-fil. Når hun eksporterer, er fila mindre enn ett av fotografiene på kundens forside.
Kafeen
Skarp på en telefon, skarp på en kinolerret
Kunden åpner nettsiden sin på mobilen over kaffen. Øverst ruller det lille ikonet gjennom bevegelsen sin, knivskarpt, uten å hakke og uten å laste ned en video først. Samme fil ligger på storskjermen i resepsjonen. Fordi animasjonen er vektorbasert, finnes det ingen oppløsning å vokse ut av.
Gjennomgangen
Bevegelsen er en del av merkevaren
To designere ser på sekvensen på laptopen, og den ene tegner bevegelsen i lufta med hånden: litt raskere inn, en mykere stopp. Så justeres kurven, og fila eksporteres på nytt. Denne guiden forklarer hva Lottie er, hvor du finner eller bestiller animasjoner, og hvordan du bruker dem på Opplink og på din egen nettside.
Lottie er et format for lette vektoranimasjoner som er skarpe i alle størrelser. Her er hva det er, hvor du finner filer, og hvordan du bruker dem.
En Lottie holder seg knivskarp i alle størrelser, veier lite og fungerer på nesten hvilken som helst nettside. På Opplink kan du bruke den som bevegelig logo på bedriftsprofilen eller som et animert element på en side du redigerer selv. Denne guiden går gjennom hva formatet er, hva «.lottie» betyr, hvorfor lette filer teller for søk og brukere, hvor du finner animasjoner, hva lisensene sier, når Lottie passer og ikke, og hva du bør be om når du bestiller en bevegelig logo fra en designer.
Fakta er hentet fra dokumentasjonen til lottie-web (Airbnb), Lottie-spesifikasjonen og dotLottie-formatet fra LottieFiles, LottieFiles' egen planoversikt og Googles web.dev om lastetid. Alle kilder står nederst.
Kjenner du deg igjen?
Logoen på nettsiden er en GIF som hakker
Den var fin på designerens skjerm. På mobil er den kornete, på storskjermen i resepsjonen er den et frimerke, og fila veier mer enn resten av forsiden.
Du la inn en video øverst, og siden ble treg
Videoen på fem sekunder krever nedlasting før den spiller, og Google måler hvor lenge det tar før det største elementet på siden er synlig. Nå er det videoen.
Du lastet ned en gratis animasjon og brukte den i annonsen
Fila lå åpent i et bibliotek, og ingen leste lisensen. Nå er det uklart om den kunne brukes kommersielt, og designeren som laget den, har sett annonsen.
Du vil ha en bevegelig logo, men vet ikke hva du skal be om
«En animasjon av logoen» kan bli en video, en GIF eller en Lottie, og de tre oppfører seg helt ulikt på nettsiden din. Bestillingen avgjør hva du kan bruke den til.
Hva er Lottie, og hva er «.lottie»?
Lottie er et vektorbasert animasjonsformat som bruker JSON til å beskrive animasjonen, ifølge spesifikasjonen. I stedet for å lagre bilder av hvert enkelt bildeutsnitt, slik en video eller en GIF gjør, lagrer fila formene, fargene og hvordan de skal bevege seg. Spilleren på nettsiden tegner animasjonen på nytt i sanntid, i akkurat den størrelsen den vises i.
Formatet kommer fra Bodymovin, et gratis tillegg til Adobe After Effects utviklet av Hernan Torrisi, som eksporterer animasjoner som JSON. Airbnb ga ut spillerne som åpen kildekode under navnet Lottie: lottie-web for nettsider, og egne biblioteker for iOS og Android. lottie-web kan tegne animasjonen som SVG, på canvas eller som HTML-elementer, og dokumentasjonen anbefaler å komprimere JSON-filene med gzip, som gir «en stor reduksjon i filstørrelsen».
«.lottie» (dotLottie) er en pakket variant fra LottieFiles: et åpent, komprimert filformat som kan samle flere animasjoner, bilder, temaer og interaktive tilstandsmaskiner i én fil. Deflate-komprimering og delte ressurser gjør en .lottie «langt mindre enn rå eller base64-innebygd JSON», ifølge dokumentasjonen. På Opplink laster du opp Lottie som .json, og de fleste verktøy lar deg eksportere eller laste ned nettopp .json.
Test selv: høyreklikk på en animasjon på en nettside du liker, og se om det er en video, en GIF eller et SVG-element som tegnes. Zoom inn i nettleseren: blir den kornete, er det ikke Lottie.
Hvorfor filstørrelsen teller for søk og kunder
Google måler hvor lang tid det tar før det største synlige elementet på siden er lastet (Largest Contentful Paint). Ofte er det et bilde eller en video øverst, altså akkurat der en bevegelig logo gjerne står.
2,5 sekunder
Grensen web.dev anbefaler for Largest Contentful Paint. Nettsteder bør ligge under den for minst 75 prosent av sidevisningene. En tung video øverst spiser den marginen alene.
75 %
Andelen sidevisninger som bør treffe grensen, ifølge web.dev. Det betyr at siden må være rask også på en middels mobil på et middels nett, ikke bare på designerens maskin.
Lottie hjelper her fordi fila er tekst, ikke bilder, og fordi den tegnes i den størrelsen den trengs. Men den er ikke gratis for nettleseren: lottie-web sin dokumentasjon understreker at animasjonen tegnes i sanntid, og anbefaler å holde After Effects-prosjektet enkelt. En Lottie med hundre lag og effekter kan være tyngre å spille enn en kort video. Hold logoen enkel, så vinner du på begge fronter.
Test selv: kjør nettsiden din gjennom PageSpeed Insights (pagespeed.web.dev). Står det en video eller et stort bilde som LCP-element øverst, er det kandidaten for å bli erstattet med en lett Lottie.
Hvor finner du animasjoner?
LottieFiles
Det største biblioteket, og selskapet bak dotLottie. Mange animasjoner er gratis, men full tilgang og enkelte nedlastinger krever betalt abonnement. Ifølge LottieFiles' egen planoversikt er Individual-planen ment for ikke-kommersielt arbeid, mens Team-planen er for kommersielle prosjekter. Sjekk alltid lisensen før du bruker en fil kommersielt.
Gratis alternativer
IconScout, Lottielab, Creattie og Use Animations tilbyr gratis Lottie-filer, flere uten krav om kreditering. Aktive miljøer, blant annet på Reddit, deler stadig oppdaterte tips om hvor man finner gode gratis animasjoner. Les lisensen per fil, ikke per nettsted.
Lag dine egne
Proffene bruker Adobe After Effects med tillegget Bodymovin (gratis, utviklet av Hernan Torrisi) eller LottieFiles for After Effects. Verktøy som Lottielab, Rive og SVGator kan også lage Lottie. En designer kan levere både .json og .lottie fra samme prosjekt.
Test selv: finn lisensteksten til den forrige animasjonen dere lastet ned. Står det at kommersiell bruk er tillatt, og for hvilke kanaler? Finner du den ikke, gjelder samme regel som for bilder fra nettet: ikke bruk den før du vet.
Bruk den på egen nettside også
Lottie er ikke begrenset til Opplink. Med en liten spiller (for eksempel lottie-web) kan animasjonen legges rett inn på din egen nettside, i apper, og i e-poster som støtter det. Den samme .json-filen kan gjenbrukes overalt: én animasjon, mange flater.
De fleste publiseringsløsninger har en modul eller et tillegg for Lottie, og en webutvikler legger inn spilleren på under en time. Be om at animasjonen har en stillbilde-versjon (SVG eller PNG) som reserve for e-postklienter og eldre nettlesere som ikke spiller den.
Når passer Lottie, og når passer det ikke?
Passer
Ikoner, logoer, laste-indikatorer, illustrasjoner og små mikrointeraksjoner: korte, vektorbaserte animasjoner som skal være knivskarpe og lette. En grei huskeregel: kan motivet tegnes med former og streker, er Lottie som regel det letteste, skarpeste og mest fleksible valget.
Passer ikke
Fotografisk eller filmatisk innhold: ekte video, komplekse scener, mennesker og landskap. Der er vanlig video fortsatt riktig verktøy. Det samme gjelder svært komplekse animasjoner med mange lag og effekter, som blir tunge å tegne i sanntid.
Test selv: skisser motivet med tusj på et ark. Klarer du det med former og streker på under et minutt, er det en Lottie. Trenger du et fotografi for å forklare det, er det en video.
Slik bruker du det på Opplink
Last opp Lottie-filen (.json) under logo på bedriftsprofilen, samme sted som et vanlig bilde, eller som en «Bevegelig bilde»-blokk i Rediger side. Du styrer loop, hastighet, farge og om den skal spilles automatisk eller ved hover og klikk. Se også guiden til Rediger side og artikkelen om bedriftsprofilen.
Vil du ha en profesjonell bevegelig logo eller animasjon, til Opplink eller din egen nettside, kan du leie en grafisk designer eller webutvikler gjennom et oppdrag her på Opplink.
Test selv: last opp en gratis Lottie på profilen din og se den på mobilen. Ser den riktig ut i lys og mørk modus? Hvis ikke, er farge og bakgrunn det du ber designeren om først.
Bestille en bevegelig logo: dette ber du om
En bevegelig logo er et lite oppdrag, men bestillingen avgjør hva du får bruke den til. Be om dette:
- Filformat: Lottie som .json, og gjerne .lottie i tillegg. Ikke bare en MP4.
- Lengde og loop: hvor lang bevegelsen er, og om den skal gå én gang eller i sløyfe.
- Farger: at fargene kan endres i fila, og at den fungerer på lys og mørk bakgrunn.
- Stillbilde-versjon: SVG eller PNG av sluttbildet som reserve.
- Enkelhet: få lag, ingen effekter som ikke støttes i lottie-web. Be om at fila testes i spilleren før levering.
- Rettigheter: at du får bruksrett til alle kanaler, og at kildefilen (After Effects-prosjektet) følger med eller kan kjøpes.
Send med logoen som SVG og en lenke til nettsiden. Da kan designeren gi pris på under en dag, og du kan sammenligne tilbud som faktisk handler om det samme.
Fire påstander du kan se bort fra
«En GIF er like bra»
En GIF er en serie bilder med begrenset fargeantall og fast oppløsning. Den blir kornete når den skaleres opp, og veier fort mer enn en Lottie som beskriver den samme bevegelsen som tekst.
«Lottie er bare for apper»
Formatet kom fra mobil, men lottie-web har spilt animasjoner i nettlesere siden starten, som SVG, canvas eller HTML. Opplink og de fleste publiseringsløsninger støtter det.
«Alt som er gratis, kan brukes fritt»
Gratis å laste ned er ikke det samme som fri lisens. LottieFiles skiller selv mellom ikke-kommersielt og kommersielt arbeid i planene sine. Les lisensen per fil.
«Animasjon gjør siden treg»
En tung video gjør det. En enkel Lottie er en liten tekstfil som tegnes i riktig størrelse. Holder du den enkel, kan den være det letteste elementet øverst på siden.
Vanlige spørsmål om Lottie
Hva er en Lottie-fil?+
En Lottie er en vektorbasert animasjon lagret som JSON. Fila beskriver former, farger og bevegelse i stedet for å lagre bilder av hvert utsnitt, og spilleren tegner animasjonen i sanntid i den størrelsen den vises. Derfor er den skarp på alle skjermer og som regel mye mindre enn en video eller GIF.
Hva er forskjellen på .json og .lottie?+
Begge er Lottie. .json er den opprinnelige fila slik Bodymovin eksporterer den. .lottie (dotLottie) er en komprimert pakke fra LottieFiles som kan samle flere animasjoner, bilder, temaer og interaktive tilstander i én fil, og som er langt mindre enn rå JSON. På Opplink laster du opp .json.
Kan jeg bruke en Lottie som logo på Opplink?+
Ja. Last opp .json-fila under logo på bedriftsprofilen, samme sted som et vanlig bilde, eller som en «Bevegelig bilde»-blokk i Rediger side. Du styrer loop, hastighet, farge og om den spilles automatisk eller ved hover og klikk.
Hvor finner jeg gratis Lottie-animasjoner?+
LottieFiles har det største biblioteket, med mange gratis filer og betalte planer for full tilgang. IconScout, Lottielab, Creattie og Use Animations har også gratis filer. Les lisensen for hver enkelt fil før du bruker den kommersielt.
Kan jeg bruke gratis Lottie-filer i markedsføring?+
Bare hvis lisensen sier det. LottieFiles skiller selv mellom Individual-planen for ikke-kommersielt arbeid og Team-planen for kommersielle prosjekter. Andre biblioteker har egne vilkår. Finner du ikke lisensen, bruk ikke fila.
Hvordan lager jeg en Lottie selv?+
Vanligst er Adobe After Effects med det gratis tillegget Bodymovin eller LottieFiles for After Effects. Lottielab, Rive og SVGator kan også lage Lottie uten After Effects. Hold animasjonen enkel, med få lag, så spiller den lett i nettleseren.
Gjør en Lottie nettsiden tregere?+
Sjelden, hvis den er enkel. Fila er tekst og kan gzip-komprimeres kraftig, og den tegnes i riktig størrelse. Men animasjonen tegnes i sanntid, så en svært kompleks Lottie med mange lag og effekter kan bli tung. web.dev anbefaler at det største elementet på siden er lastet innen 2,5 sekunder.
Hva koster det å få laget en bevegelig logo?+
Det avhenger av lengde, kompleksitet og om logoen finnes som vektor fra før. Be om Lottie som .json og .lottie, en stillbilde-versjon, fargevarianter og bruksrett til alle kanaler, så blir tilbudene sammenlignbare. Send med logoen som SVG.
Vil du ha logoen i bevegelse?
Vil du ha en bevegelig logo eller en animasjon til Opplink eller egen nettside? Legg ut oppdraget gratis og få tilbud fra grafiske designere og motion-designere. Skriv «Lottie som .json» i utlysningen, så vet alle hva de skal levere.
Kilder
- Lottie: offisiell dokumentasjon fra Airbnb for spillerne til nett, iOS og Android https://airbnb.io/lottie/#/
- lottie-web (GitHub): spilleren for nettsider, tegner som SVG, canvas eller HTML; sanntidstegning og gzip gir stor reduksjon i filstørrelse https://github.com/airbnb/lottie-web
- Lottie-spesifikasjonen: «Lottie er et vektoranimasjonsformat som bruker JSON til å representere dataene» https://lottiefiles.github.io/lottie-docs/
- dotLottie (.lottie): åpent, komprimert format som pakker flere animasjoner, bilder, temaer og tilstandsmaskiner i én fil https://dotlottie.io/
- LottieFiles: bibliotek, verktøy og lisenser https://lottiefiles.com/
- LottieFiles: planoversikt, Free, Individual (ikke-kommersielt), Team (kommersielle prosjekter) og Enterprise https://help.lottiefiles.com/choosing-the-right-plan-for-you
- web.dev (Google): Largest Contentful Paint bør være 2,5 sekunder eller mindre for minst 75 prosent av sidevisningene https://web.dev/articles/optimize-lcp
- web.dev (Google): om ytelse og lette ressurser https://web.dev/learn/performance