DEV Community

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

Read full post

ADAMU MUHAMMAD MUHAMMAD • Jul 17 '22

Really insightful thanks

Franklin Martinez • Jul 17 '22

you're welcome! 😉

ajayts07 • Jul 20 '22

Very useful! Thanks for sharing!

Max Programming • Jul 16 '22

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

Franklin Martinez • Jul 17 '22

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

Sadeedpv🥇 • Jul 16 '22

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

Franklin Martinez • Jul 17 '22

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

Joel Turner • Jul 16 '22

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

Franklin Martinez • Jul 17 '22

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

The Coding Mermaid 🧜‍♀️ • Jul 16 '22

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

Franklin Martinez • Jul 17 '22

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

Mike Lu • Jul 16 '22

Awesome

Shamim Islam • Jul 18 '22

great one

Md. Maruf Sarker • Jul 17 '22

Thanks for this awesome article

Franklin Martinez • Jul 17 '22

No problem, wait for more to come! 😉

Usuario163 • Jul 16 '22

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

Franklin Martinez • Jul 17 '22

I'm glad you found this info useful 🤩🤩

Rustam Taramov • Jul 16 '22

Thank you! Useful info 👍

Franklin Martinez • Jul 17 '22

My pleasure to have helped you! hehe 😉

Krishna Agarwal • Jul 20 '22

Thanks a lot
Helpful.

Quiver and quake! • Jul 19 '22

Awesome

Eduardo Vargas • Jul 18 '22

How to solve lazy loading ?

Franklin Martinez • Jul 18 '22

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

Fábio Tramasoli • Jul 16 '22

OMG! This is so nice!

Franklin Martinez • Jul 17 '22

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

Rajdeep Chandra • Sep 9 '22

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.

Rajdeep Chandra • Sep 9 '22

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 }}
    />
  );
};

BrahimiMehdi • Aug 19 '22

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?

Michal Kurzewski • Mar 17 '23 • 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.