DEV Community

Cover image for How to use Lottie animations & React JS? 🖌️

How to use Lottie animations & React JS? 🖌️

Franklin Martinez on July 15, 2022

Surely you've seen some GIF-like elements on web pages that attract a lot of attention because of their movement and design, and you're wondering: ...
Collapse
 
sadeedpv profile image
Sadeedpv🥇

Hey, this is really helpful 🔥, will definitely use them in my next projects

Collapse
 
franklin030601 profile image
Franklin Martinez

I know, and your next project will look great with this! 🔥

Collapse
 
adamusgeeky profile image
ADAMU MUHAMMAD MUHAMMAD

Really insightful thanks

Collapse
 
franklin030601 profile image
Franklin Martinez

you're welcome! 😉

Collapse
 
krishnaagarwal profile image
Krishna Agarwal

Thanks a lot
Helpful.

Collapse
 
maxprogramming profile image
Max Programming

Wow! I had no idea something like this also existed! Thanks a lot Franklin 🤩!

Collapse
 
franklin030601 profile image
Franklin Martinez

I also got excited when I discovered them 🤯 hehe, and you are welcome, it was my pleasure 😉

Collapse
 
ajayts07 profile image
ajayts07

Very useful! Thanks for sharing!

Collapse
 
joelmturner profile image
Joel Turner

This is great! Thank you for the explanation of the differences with gif.

Collapse
 
franklin030601 profile image
Franklin Martinez

You're welcome, I hope you use them in your next projects! hehe 😉

Collapse
 
monicafidalgo profile image
The Coding Mermaid 🧜‍♀️

Awesome work and tutorial Franklin!! This is precious to create a cool landing page in a few steps! Thanks! And also for explaining the difference between a gif and a lottie

Collapse
 
franklin030601 profile image
Franklin Martinez

I'm glad you found this post useful 😊, and you're right, landing pages will look great using lottie. 🤩

Collapse
 
mike0120 profile image
Mike Lu

Awesome

Collapse
 
shamimislambd profile image
Shamim Islam

great one

Collapse
 
turbo63 profile image
Rustam Taramov

Thank you! Useful info 👍

Collapse
 
franklin030601 profile image
Franklin Martinez

My pleasure to have helped you! hehe 😉

Collapse
 
mdmarufsarker profile image
Md. Maruf Sarker

Thanks for this awesome article

Collapse
 
franklin030601 profile image
Franklin Martinez

No problem, wait for more to come! 😉

Collapse
 
flash010603 profile image
Usuario163

I loved this publication, thank you for sharing this information, it is very helpful!

Collapse
 
franklin030601 profile image
Franklin Martinez

I'm glad you found this info useful 🤩🤩

Collapse
 
earthshakers profile image
Quiver and quake!

Awesome

Collapse
 
duvrgs profile image
Eduardo Vargas

How to solve lazy loading ?

Collapse
 
franklin030601 profile image
Franklin Martinez

Honestly I haven't found a way to solve the lazy loading with lottie, but still lottie are much less heavy compared to using a gif.😓

And try to use them in places where not so many processes are done, because the web would be much slower. 👀

Collapse
 
ilosamart profile image
Fábio Tramasoli

OMG! This is so nice!

Collapse
 
franklin030601 profile image
Franklin Martinez

I know hehe, I thought so too when I first discovered them. 🤩

Collapse
 
rajdeepc profile image
Rajdeep Chandra

Thanks for the article. Really helpful. Though one thing to check.
When I have dynamic frames getting loaded into the player via props and I want to autoplay those.
I can set the framesStart with setSeeker like this
playerRef.current.setSeeker(lottieFrames[0]); // lottieFrames [0, 25]

But I cannot play the loop from 0 - 25.

Collapse
 
rajdeepc profile image
Rajdeep Chandra

Solved it!!

import Lottie from 'react-lottie-player';

const LottieComponent = ({ animationData, lottieFrames = [], height = 50, width = 50 }) => {
  return (
    <Lottie
      loop={true}
      play={true}
      animationData={animationData}
      segments={true && lottieFrames}
      style={{ width: width, height: height, borderRadius: 16 }}
    />
  );
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
brahimi__mehdi profile image
BrahimiMehdi

This thread was amazing!
i've used this way to implement animations within my website , but faced manny issues when i added more than one.
the main one being the 8 extra secondes of main thread activity , any solution for that?

Collapse
 
michalkurzewski profile image
Michal Kurzewski • Edited

I've signed up just to give kudos for this one. :D gj! detailed animation was the only thing missing from doing stuff with framer motion. I first spotted lottie when my son was browsing "wimpy kid" webpage I was like: this is so cool, how they did that!? Having this in my react skillset will be very cool.

Collapse
 
mahizha profile image
Mahizha N S

great, but if i have the json in my local repo, the gif doesnt load
import animationData from './BlobAnimation.json';
is there any solution