Måske har du hørt om det før, eller måske er det helt nyt for dig – uanset hvad, vil jeg nu fortælle dig om hvad Lottie er og hvorfor det er helt fantastisk!
Hvad er Lottie
Lottie er en grafisk animation i form af en json fil, json er et kodesprog så derfor er animationen udelukkende et stykke kode – wow! Det betyder, som mange nok allerede kan regne ud at det sikkert fylder meget mindre end de filer vi normalt ville påtænke animationer.
Se lige her:
Helt crazy!
Hvis du driver en hjemmeside, eller arbejder med web – så kender du godt til hvor altafgørende det er at hjemmesider og apps loader hurtigt, og at filstørrelserne på dine billeder, lækre grafik og animationer har en afgørende rolle.
Lottie var også for nyligt nyt for mig, – så fortvivl ikke! Dog blev denne måde at lave en animation på, udviklet allerede tilbage i 2015. Herefter fik Airbnb i 2017 øjnene op for denne banebrydende metode, og implementerede det i deres egne produkter. Dette gjorde at Lottie i de følgende år blev mere kendt og testet verden over.
Udover at være superhurtig, er Lottie vektor baseret, det betyder at du har mulighed for at skalere det op til helt store størrelser uden at miste kvaliteten. Derudover giver Lottie muligheder for interaktivitet når det er implementeret, det kan fx være animationen skal kører på klik, scrol, eller når du holder musen hen over grafikken. Der er uendelige gode grunde til at tage et kig på Lottie!
Hvordan bruger man Lottie?
Lottie kan bruges til mange ting, det kan være det blikfang som skal fange brugeren når de lander på din side, eller det kan være helt simple mikro animationer som f.eks. et hjerte som animeres når en kunde putter et produkt i deres ønskeliste.
https://lottiefiles.com/8996-heart
Tag et kig på LottieFiles for at blive inspireret eller se de mange gratis Lottie filer du kan hente helt kvit og frit! https://lottiefiles.com/featured Her findes også en markedsplads hvor du har mulighed for at købe Lottie filer. Her har du også mulighed for at tilpasse filerne og bestemme hvordan de skal implementeres på din platform.
Lottie i WordPress
Vil du begynde at shine dit WordPress site op med Lottie, så se med her!
LottieFiles giver en god guide til hvordan du nemt kan implementere Lottie filer til dit site, læs her. https://lottiefiles.com/wordpresscom Dette fungerer med de filer du kan finde på LottieFiles eller laver der, læs videre for at høre hvordan.
Derudover har Elementor Pro en wigdet som nemt kan implementere Lottie til dit site, her har du også mange forskellige muligheder for at styre animationens adfærd! Du kan med Elementor Pro’s wigdet sætte Lottie filer ind som du har fundet hos LottieFiles, eller uploade din helt egen json fil med din egen Lottie animation. Læs mere her: https://elementor.com/widgets/lottie-widget/
Derudover findes der en del builders, eller extensions til builders har ofte et Lottie modul eller wigdet, på samme måde som Elementor Pro – tag og undersøg hvilke muligheder du allerede nu har tilgængelig på dit site!
Der findes naturligvis også diverse plugins til formålet.
Hvordan laver man en Lottie
På LottieFiles, har du mulighed for at konvertere en SVG-fil til en Lottie fil, herefter kan du tilpasse filen i Editoren, på samme måde som de eksisterende animationer som er på LottieFiles. https://lottiefiles.com/svg-to-lottie
Men normalt vil en lottie blive bygget ved hjælp af en extension til Adobe After Effects. Her findes to muligheder; Bodymovin som er er den originale extension og en LottieFiles extension.
Vær opmærksom på at det er grafik som skal animeres og ikke billeder, mange vil starte med at udarbejde grafikken i et vektorprogram som f.eks. Adobe Illustrator. En anden ting der er vigtig, er at omdanne tekst til vektor, dette sikrer at fonten ikke ændres til en standard ved visning.
Jeg håber du er blevet lidt klogere på Lottie, og har fået øjnene op for nye muligheder for at bringe din hjemmeside op på et nyt niveau!
Tag endelig fat i os hvis du gerne vil have hjælp til at få Lottie på din platform, eller vil have designet din helt egen Lottie!
// Lenette – Grafisk Designer
