Lottie: bevegelige logoer og bilder på nettsiden

Bedrift: Opplink AS
Ingen stemmer ennå
Stem:

Lottie er et format for lette, skarpe animasjoner. De holder seg knivskarpe i alle størrelser, veier lite, og fungerer på nesten hvilken som helst nettside – ikke bare her på Opplink, hvor du kan bruke dem som bevegelig logo eller som et animert element på en side.

Hva er Lottie og «.lottie»?

En Lottie lagres som en liten JSON-fil (.json). «.lottie» er en pakket variant som kan samle flere animasjoner og temaer i én fil. På Opplink laster du opp Lottie som .json – de fleste verktøy lar deg eksportere eller laste ned nettopp .json. Fordi animasjonen er vektorbasert, blir den skarp på alle skjermer og er som regel langt mindre enn en video eller GIF.

Hvor finner du animasjoner?

LottieFiles

Det største biblioteket. Mange animasjoner er gratis, men merk at full tilgang og enkelte nedlastinger nå krever et betalt abonnement (fra rundt 20 USD per måned). 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.

Lag dine egne

Proffene bruker Adobe After Effects med tillegget Bodymovin (gratis, laget av mannen bak Lottie) eller LottieFiles for After Effects. Verktøy som Lottielab, Rive og SVGator kan også lage Lottie.

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.

Når passer Lottie – og når ikke?

Lottie skinner på ikoner, logoer, laste-indikatorer, illustrasjoner og små mikrointeraksjoner – korte, vektorbaserte animasjoner som skal være knivskarpe og lette. Til fotografisk eller filmatisk innhold (ekte video, komplekse scener) er vanlig video fortsatt riktig verktøy. En grei huskeregel: kan motivet tegnes med former og streker, er Lottie som regel det letteste, skarpeste og mest fleksible valget.

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. 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.

Kilder

  1. Lottie – offisiell dokumentasjon (Airbnb) https://airbnb.io/lottie/#/
  2. LottieFiles – bibliotek, verktøy og lisenser https://lottiefiles.com/
  3. lottie-web – spiller for nettsider (GitHub) https://github.com/airbnb/lottie-web
  4. Lottie-formatet – teknisk spesifikasjon https://lottiefiles.github.io/lottie-docs/
  5. dotLottie (.lottie) – dokumentasjon https://developers.lottiefiles.com/docs/dotlottie/
  6. web.dev – om ytelse og lette ressurser (Google) https://web.dev/learn/performance