Genom att klicka på "acceptera alla cookies" samtycker du till lagring av cookies på din enhet för att förbättra navigeringen på webbplatsen, analysera webbplatsens användning och bistå i våra marknadsföringsinsatser. Läs mer i våra Integritets- och Cookie policy för mer information.
Illustration av Lottie-verktyget

Lottie Creator - smidigt animeringsverktyg eller buggig betaversion

Emil Seres
July 24, 2024

Animationer, möjligheten att skapa rörligt material utan ett helt produktionsteam, ett utmärkt sätt att att berätta komplexa idéer på kort tid och väcka uppmärksamhet. För att inte tala om att det är rätt roligt att titta på. Och nu har vi ett nytt tillskott i familjen verktyg, Lottie Creator. Men håller det måttet? Vår egen husanimatör och designer Emil, bestämde sig för att sätta det på prov.

Jag har alltid haft en förkärlek till animationer eftersom det är ett effektivt sätt att kommunicera på på webben. Tyvärr har animationer varit ett område som varit mindre populärt under en lång tid, eftersom animationer var mp4-filer som var tunga och långsamma, för att inte glömma att internet inte var lika snabbt då som nu. Som tur är har det hänt en del sedan dess - och ett av de senaste tillskotten för oss designers är det webbaserade animeringsverktyget Lottie Creator. 

Vem är egentligen Lottie?

Lottie är faktiskt ett filformat, döpt efter den tysk-brittiska siluettkonstnären, animatören och filmregissören Charlotte “Lotte” Reiniger. Det används för att animera och spela upp animationer på webbplatser och i appar. Det började som ett projekt av utvecklaren Hernan Torrisi, som skapade ett plugin med Lottie för Adobe After Effects, Bodymovin. Pluginet gjorde det möjligt att exportera animeringar från After Effects till en JSON-fil som kunde spelas upp med hjälp av ett webbskript. Nu kunde designers skapa komplexa animeringar i After Effects och använda dem på webben, utan att behöva omvandla dem till GIF eller andra tyngre format. Detta blev startskottet för lättviktiga animationer på hemsidor.

Bodymovin adopterades av ingen mindre än Airbnb och har sedan dess lanserats i plugins till program som Figma, Wordpress och Drupal. Lottie har nu utvecklats till att bli ett fristående webbaserat verktyg “Lottie Creator”, för att göra det ännu smidigare för oss designers att skapa animationer för app och webb.

Lottie Creator- upp till bevis

Vanligtvis när jag arbetar, skapar jag en animation först i Illustrator eller Figma för att sedan importera de stillastående objekten. Men den här gången ville jag se om det gick att skapa objekt från grunden i Lottie Creator. Så jag inledde den kreativa processen direkt i verktyget. 

Hur gick det då? Jag fick ihop en rolig och lättsam animation som skulle upp på sociala medier, dessvärre inte utan viss frustration. Under processens gång hade jag några positiva upplevelser, men desto fler negativa. Alla hittar du i listan nedan, där jag främst jämför verktyget med After Effects.

Fördelar

  • Lottie Creator har ett modernt gränssnitt som i teorin exporterar lätta svg-animationer för webben.
  • Det finns ett stort bibliotek med färdiga animationer som enkelt kan justeras och anpassas.

Nackdelar

  • Idag är Lottie Creator endast ett webbgränssnitt och ingen fristående app, vilket påverkar hotkeys och arbetsflödet i stort.
  • Det är fortfarande en betaversion och det märks- gränssnittet är ibland buggigt. Vid klick på en keyframe markeras ibland en helt annan. 
  • AI-prompt till vektorgrafik fungerar dåligt, ett problem även branschledande Illustrator har. Framförallt kan den inte skapa illustrationer i olika lager, vilket krävs för animationer.
  • Cloud save fungerar inte alltid vilket resulterar i att användare måste vänta.
  • När grafik matades in blev gränssnittet långsammare. Det är oacceptabelt på en relativt ny MacBook Pro med M2-chip.
  • Exportfunktionen är under all kritik då alla grafiska element inte följer med.

Exporten, den kritiska biten när vi kreatörer är färdiga med vårt arbete- det är inte där man vill stöta på ett problem. Men som du kanske kan gissa utifrån min sista punkt ovan, var det precis det som hände. Hur jag än försökte kunde jag inte exportera det jag gjort. Efter flertalet googlingar gav jag upp. Det visade sig att "kinetic typography", som jag baserat hela min animation på, inte fungerade vid export just nu. Istället fick jag öppna After Effects och skapa animationen på nytt. 


Tyvärr levde inte Lottie Creator upp till hypen. Min nästa animation kommer att göras i After Effects, som har färre problem och är mer kraftfull.

Rörligt har en garanterad plats i framtidens marknadsföring 

Animationer är ett effektivt sätt att kommunicera på webben, där en användare överrumplas av marknadsföring och det kan vara svårt att sticka ut och vara intressant nog. Genom att arbeta med animationer kan vi förmedla flera budskap på kortare tid och på ett mer intressant och kreativt sätt. Inlägg och hemsidor med rörligt material får fler besök och mer engagemang, det kan du läsa mer om här.

AI+animationer= kreatörens död?

En fråga jag ofta får är hur framtiden ser ut för digitala kreatörer, särskilt kopplat till animationer och rörlig media. Konkurrensen om att synas kommer bli större, men att skapa material som bygger på en kreativ idé kopplat till ett varumärkes riktning och målsättning kommer inte att ske automatiskt utan mänsklig kreativitet. AI ses idag som ett hjälpmedel och jag tror att det kommer fortsätta vara så. Det gäller bara att anpassa sig till det nya arbetsflödet.

Animera mera med oss!

Nyfiken på att börja animera på din webb eller i app? Kontakta oss på Odd Hill så hjälper vi dig att förverkliga din animation och fånga din målgrupp.

Den kommer givetvis att skapas i After Effects.

Relaterade artiklar

Se alla Artiklar
Låt användarna visa vägen

Hur tar man fram digital gränssnittsdesign som både älskas av användarna och är bra för affärerna?

UX-förbättringar för e-handel

De här är de viktigaste viktigaste sakerna vi tycker e-handlare bör kika på.

Vad är användarskapat innehåll och varför är det viktigt?

Att låta användarna skapa innehållet på webbplatsen har många fördelar. Inte bara sparar det tid och pengar, det upplevs även som mer äkta och trovärdigt.

7 sätt AI kan användas för att öka den digitala tillgängligheten

AI har fått stort genomslag inom innehållsproduktion. Men artificiell intelligens kan även användas för att öka den digitala tillgängligheten. Och hjälpen är välkommen.

Se alla artiklar

Kontakta oss

COO
Tack så mycket!

Vi har mottagit ditt meddelande och uppskattar att du tog dig tid att kontakta oss.

Om du har ytterligare frågor eller behöver omedelbar hjälp, är du välkommen att kontakta oss direkt på +46 768 58 22 10.
Vi ser fram emot att höra från dig snart!
Oops! Något gick fel. Försök gärna igen eller kontakta oss på +46 768 58 22 10. Tack!