DEV Community

Cover image for Lottie Animations for React

Lottie Animations for React

CiaraMaria on November 08, 2020

Who doesn't love animations? They're fun, engaging, and versatile. In this post, I will introduce Lottie animations and how to implement them into ...
Collapse
 
0916dhkim profile image
Danny Kim

I've never heard of Lottie before, and it looks promising. To my understanding, Lottie is to GIF as SVG is to JPG.

Collapse
 
devhammed profile image
Hammed Oyedele • Edited

Exactly but it gives you more than what this post discussed.

You can play, pause, forward, backward the animations just like videos.

Collapse
 
jameshubert_com profile image
James Hubert

Excellent. This is right up my alley. Thanks for posting.

Collapse
 
mariaverse profile image
CiaraMaria

Excite!

Collapse
 
jameshubert_com profile image
James Hubert

I ended up using this for an ecommerce frontend I'm building for a client's site!
dev.to/jwhubert91/project-31-of-10...

Thread Thread
 
mariaverse profile image
CiaraMaria

Yay! I love hearing that you were able to implement this! Thank you for the update.

Collapse
 
husseinkizz profile image
Hussein Kizz

I was struggling through a lot of docs and this wasn't there, thanks so much I finally added lottie to my portfolio following your post!

Collapse
 
mariaverse profile image
CiaraMaria

That's awesome! Thank you!

Collapse
 
teysworld profile image
Teysworld

This is awesome! I am new to React and loving these new discoveries

Collapse
 
akshay1027 profile image
Akshay.R.R • Edited

is there any ways to play with interactivity of Lottie files in react? @proiacm . Please let me know if you have any solution for this, Thank you!

Collapse
 
smilegupta profile image
Smile Gupta

How to adjust the margin in react-Lottie?