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: ...
For further actions, you may consider blocking this person and/or reporting abuse
Hey, this is really helpful 🔥, will definitely use them in my next projects
I know, and your next project will look great with this! 🔥
Really insightful thanks
you're welcome! 😉
Thanks a lot
Helpful.
Wow! I had no idea something like this also existed! Thanks a lot Franklin 🤩!
I also got excited when I discovered them 🤯 hehe, and you are welcome, it was my pleasure 😉
Very useful! Thanks for sharing!
This is great! Thank you for the explanation of the differences with gif.
You're welcome, I hope you use them in your next projects! hehe 😉
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
I'm glad you found this post useful 😊, and you're right, landing pages will look great using lottie. 🤩
Awesome
great one
Thank you! Useful info 👍
My pleasure to have helped you! hehe 😉
Thanks for this awesome article
No problem, wait for more to come! 😉
I loved this publication, thank you for sharing this information, it is very helpful!
I'm glad you found this info useful 🤩🤩
Awesome
How to solve lazy loading ?
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. 👀
OMG! This is so nice!
I know hehe, I thought so too when I first discovered them. 🤩
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.
Solved it!!
import Lottie from 'react-lottie-player';
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?
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.
great, but if i have the json in my local repo, the gif doesnt load
import animationData from './BlobAnimation.json';
is there any solution