Easy React Animations Unlocked! You have to check out this library

Check out my Full Stack Next 13 Course 🔥
developedbyed.com/
Let's get social 👇
/ developedbyed
We all love animations, but sometimes they can be quite difficult to implement in our React projects. I quickly want to point out an animation library that will let you create complex UI SVG animations.
A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
Discord: t.co/NDJAFoHgoE
#programming

[@developedbyed]

Should we start livestreaming on the channel? 👀

[@carlosavila7573]

Please! That would be amazing

[@kasuba97]

yeah🤗🤗lets go

[@EnigmaCHIPS.]

Yes we should!

[@OnlyJavascript]

yeah..love it

[@jweewee6883]

yes but A little bit

[@schnudercheib]

I've been following your tutorials for quite some time now, and it's incredible seeing the progress I've made. In fall 22 I had absolutely no clue about programming, and now I've launched my very own website which I made from scratch, largely with the help of your videos. Thank you so much my friend. Congratulations on your visa! I'm very happy for you, and I wish you just the best onward!

[@lukas.webdev]

Congratulations. Keep it up! 😉🔥

[@fortune_hr]

Lottie is amazing ed, we definitely need more videos on this and tailwind

[@randolphmaysondy7983]

Holy cow! This is amazing Ed! I could use these for my portfolio haha. thank youu

[@mattbainton1632]

First video of yours I’ve seen, Ed. Terrific walkthrough (though I hope no new devs are thrown off by the Tailwind classes) and I love your presentation style. Thanks for the Lottie setup example!

[@alishxn]

first time heard about lottie looks amazing 🔥

[@ajiljagadeesh1143]

Damn. this is pretty awesome, Thanks Dave. Great content.

[@JBWEBDEVELOPER]

Hey Ed, man i love your tuts, yah i think you should make the aftereffect video so that we make our own custom animations

[@pablowbk]

This is fantastic Ed!

[@Rikimkigsck]

This is so cool thank you for showing us

[@jweewee6883]

mennn im in love in use it for the last 10 month for different project ;) u can do scroll event too

[@samimustafa7284]

an amazing person for real, love to watch you videos, now that you got VISA you better make more videos 🤣🤣love you man

[@kimballle7714]

great tut, thanks ED

[@julianvelez6563]

Nice work bro ❤❤

[@NNNedlog]

Hello Dev Ed. Always nice watching your videos

[@wayneswildworld]

I definitely want an after affects lottie turtorial!!!

[@ogedaykhan9909]

it is absolutely fantastic!!

[@developedbyed]

Lottie + Framer Motion is just ✨✨

[@fortune_hr]

We need more videos on this !!!!!!

[@ajiljagadeesh1143]

Can you make a video on this?

[@anubhavbansal8922]

we need a video!!

[@lionmike247]

i agree with the whole comment thread! A video on those 2 both being used in a project would be awesome! love your stuff! Appreciate you

[@isaiahmekenye424]

yes it is 🙌🏽

[@BamBam.w]

Welcome to the UK! You timed it well for our 2 British summer months 😂

[@softmekdeveloper-to5vz]

amazing content, at the right time 🎉

[@craiggazimbi]

Thanks Ed , and yeah AfterEffects tutorials would be extremely cool!!!.

[@andreschou9560]

dope i have to try this lottie with react!

[@omidbonakdar4838]

thank you for your excellent tutorial😍 lottie is amazing🤩

[@tomdringer985]

Welcome to the UK! We have the best weather here ;-)

[@Speaks4itself]

need more react animation courses for landing pages and texts

[@andrewaghoghovwia1948]

Hi Ed, welcome to the UK! If you're comfortable with micro frontend in react, can you do something on it?

[@jatinpanigrahy9871]

Love ur animation series please make a clone of a awward winner site

[@kashivitagors7823]

Thank you that's pretty good!

[@gokulk2092]

Great stuff. After effects tutorial please. That would be amazing.

[@Vatz90]

Amazing video bro and that luffy shirt 🔥

[@ToadyEN]

When you're youtubing for help on a project and you see a developedbyed video

[@voldemortvi4264]

Dev , if you started streaming , i'll watch you for sure !

[@quincy6199]

Love the Luffy T-Shirt Ed💪🏾💪🏾

[@bababouy7704]

Our OWN animations ? Can't wait to see how it's done 👀

[@paulokrieger]

Nice! Thanks for your explanation! Its really amazing! Can you share the link from lottie site of this animation? Thank you!

[@funworld8379]

Is anyone facing this error while using Lottie: Error: attribute d: Expected moveto path command ('M' or 'm'), " . I am unable to see my animation on my deployment but on the local server I am able to see the animations. How do I fix this?

[@jamesdarrigo8277]

This tutorial is everything!! Completely unlocked a creative side of my work. One thing I’m having trouble with for some reason, is why I can’t access the ref.current? I get a typescript error saying that LottieRefCurrentProps is never referenced, but I have my code exactly the same as yours. Any idea why this might be? I’ve tried reinstalling the package and basically everything I know of. I’m using it in a Next.JS project if that means anything

[@developersean]

Very cool

[@padione3540]

Live stream? Yes please!

[@FzsHotDogInDonut]

I really want to create these myself. Interactive animation that is. But I have no idea how should I do it. Adobe after effects or pure css svg? I have no idea how to draw a bulb with pull wire in css. Please someone guide me. Which tool should I use to pump out these animations and use them with my next js projects. Please send help.

[@chimenemokandu3791]

Amazing ✨️ 👏

[@M4rt1nX]

Quick question. Shouldn't be better to animate the svg directly using css? I got curious and I think that I will try to measure the performance.

[@artnevka779]

did you try?

[@serychristianrenaud]

thanks

[@atticuus]

thank you

[@grim.reaper]

Yes yes yes on live streaming 🥳

[@blackpurple9163]

I've used lottie in many of my projects (vite react apps), but it's always ended up causing lags and stutters, maybe there's something in the animation library or vite that causes this, I'm just a beginner so don't know exactly how to identify what's causing this and how to fix it, can you see why vite react app lags so much and gets stuck in infinite loading? I checked my code and there shouldn't be anything that causes this kind of behaviours, there's no data fetching or anything, it's just my static portfolio website

[@maxtsh]

awesome

[@AlephNeoDev]

@NetNinja loves this

[@razdingz]

yes pls more livestream dev stuff , so we can bombard you with silly questions - like hey man , why the F is there so many JS frameworks LOL

[@Muhammed-nani964]

well it will be fun if you do live stream daily with project or talk about tech and code :)

[@ozansozuoz]

What are your thoughts on Rive?

[@sooyoung2648]

Hello, how can i stop the animation in certain animation?

[@cloud244]

Lottie is really nice but the animation files are usually huge :( you might need to dynamically import them otherwise they have a negative impact on the bundle size

[@ajinkya4658]

i am curious how to handle them, i have some abimations having 8MB size and even getting optimized version of it its still 4MB , should i convert .json file to mp4 or does it have better solutions?

[@chupitolepame5357]

@@ajinkya4658 8MB that's killer, what's your animation about? just out of curiosity

[@shubhamrasal8930]

It's lit bro

[@kasper369]

Small and jucy just focued on one thing. Enjoyed the video. Num num num. Yami

[@BreakingElegance]

How do you load a Vanilla Javascript into a React App?

[@ChrisHaupt]

Welcome to the UK! Questionable choice, but each to their own 😂

[@joaoarthurbandeira]

After changing the direction to -1, the animation reverses as expected but then the loops stop. How can i make it so it alternates infinitely without stopping, so one loop is in the normal direction and the next one is reversed? Also, when i set loop to 'true', the reverse just doesn't work... Am i missing something here? { MyRef.current?.setDirection(-1); MyRef.current?.play(); }} lottieRef={MyRef} loop={false} animationData={animationData} />

[@Threenineswon20racks]

Did your package.json receive that Lotti-react package by adding the animation plugin into your assets ?

[@stevensoekha7452]

Can you please make a tutorial on how to use Lordicon in a React App 🙏🙏🙏

[@abdelrhmansaleh1730]

guys can anyone tell me how is this null safety auto compelete happening while he is typing

[@MTPadDev]

Luffy! :D

[@muhammadumar5385]

Yeah pljjj make an Ae tutorial on hiw to make an animated svg😊

[@kaszapnagypeter]

Welcome to the UK.🎉

[@developedbyed]

awww cheers!

[@aryanmehta8246]

Hi where did you move to in the UK? :)))

[@grungemax]

What is that t-shirt about? I love it :)

[@ilyas8523]

Doesnt work well on NextJS due to server rendering. any advice?

[@Clout-000]

how can i get that json?

[@EternalCoders]

i think you have a seceond youtube channel also? coz before 2-3 years ago i visited on your channel , that namw was defrent i didnt remmeber , and now this channell is diffrent

[@DryHub]

It is compatible with Next Js ??

[@souhailDevv]

is jack peralta your bro ? JK, always love your videos ❤

[@peyo77380]

Please make the after effect tutorial ! congrats on your visa :)

[@Optable]

Funny enough, Framer Motion was built with Lottie itself

[@hamzabadii3575]

Just wow 😳 post many videos

[@omriri]

"Check a look" 😂😂😂

[@kobibr9362]

Have you tried Rive?

[@mariaj.7662]

cool tshirt

[@animegeek-011]

My man moved to UK looking for the one piece.

[@jssecrets]

UK visa?) Where are you from initially?

[@syamen333]

congratulations for your visa which city you are in UK??

[@wfl-junior]

Do the after effects video

[@constantineJohn]

Use Rive next time

[@AyushKumar-dp2gv]

Woah he's wearing one piece t-shirt

[@adityarajawat3185]

VS code theme name please??

[@joshua_226]

I think it's material theme

[@sheikhjamiralam2580]

Does it work with NextJs?

[@bybyers]

It technically should.

[@developedbyed]

It does, just add use client to the top

[@DotaJungleOfficial]

@@developedbyed Hello, in NextJs the onMouseOver event and other events doesn't work. Why?

[@paramsingh4104]

Video starts at 1:11

[@draftermyself]

like before watching! ☺🔥💥👋👋👋

[@chaseliu5011]

I do these from ae, don't need Lottie files. I don't think we need a paid service over another paid service just to be lazy...

[@juanmacias5922]

Rive is better :D

[@jannickpedersen4620]

Fo sho more easy than your Rive video LOL

[@developedbyed]

Hahahha I agree!

[@bennettbmadavana7176]

One piece

[@phaneendra777]

yo! man are you a one piece fan🤔

[@automioai]

O for sure, we will love a live code with you

[@Yobtuber]

Let's go for a pint now that you no longer need to hide! 🫣 Cheers Mate!