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

No video

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

Рет қаралды 196,454

Күн бұрын

Check out my Full Stack Next 13 Course 🔥
developedbyed....
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/dev...
Discord: t.co/NDJAFoHgoE
#programming

Пікірлер: 146

@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

@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 🙌🏽

@alishxn Жыл бұрын

first time heard about lottie looks amazing 🔥

@BamBam.w Жыл бұрын

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

@tomdringer985 Жыл бұрын

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

@wayneswildworld Жыл бұрын

I definitely want an after affects lottie turtorial!!!

@randolphmaysondy7983 Жыл бұрын

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

@Speaks4itself Жыл бұрын

need more react animation courses for landing pages and texts

@jatinpanigrahy9871 Жыл бұрын

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

@craiggazimbi Жыл бұрын

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

@mattbainton1632 6 ай бұрын

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!

@ajiljagadeesh1143 Жыл бұрын

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

@ToadyEN Жыл бұрын

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

@kimballle7714 Жыл бұрын

great tut, thanks ED

@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

@ogedaykhan9909 Жыл бұрын

it is absolutely fantastic!!

@julianvelez6563 Жыл бұрын

Nice work bro ❤❤

@voldemortvi4264 Жыл бұрын

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

@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

@Rikimkigsck Жыл бұрын

This is so cool thank you for showing us

@pablowbk Жыл бұрын

This is fantastic Ed!

@jweewee6883 Жыл бұрын

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

@bababouy7704 Жыл бұрын

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

@kaszapnagypeter Жыл бұрын

Welcome to the UK.🎉

@developedbyed Жыл бұрын

awww cheers!

@AlephNeoDev Жыл бұрын

@NetNinja loves this

@andrewaghoghovwia1948 Жыл бұрын

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

@ozansozuoz Жыл бұрын

What are your thoughts on Rive?

@Optable Жыл бұрын

Funny enough, Framer Motion was built with Lottie itself

@MTPadDev Жыл бұрын

Luffy! :D

@softmekdeveloper-to5vz Жыл бұрын

amazing content, at the right time 🎉

@samimustafa7284 Жыл бұрын

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

@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 5 ай бұрын

did you try?

@andreschou9560 Жыл бұрын

dope i have to try this lottie with react!

@NNNedlog Жыл бұрын

Hello Dev Ed. Always nice watching your videos

@omidbonakdar4838 6 ай бұрын

thank you for your excellent tutorial😍 lottie is amazing🤩

@kashivitagors7823 4 ай бұрын

Thank you that's pretty good!

@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

@harmandeepmand2651 17 күн бұрын

I really like the font and backgroud theme you are using, could you please let me know. Thank You

@gokulk2092 Жыл бұрын

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

@Vatz90 Жыл бұрын

Amazing video bro and that luffy shirt 🔥

@omriri 8 ай бұрын

"Check a look" 😂😂😂

@developersean Жыл бұрын

Very cool

@quincy6199 Жыл бұрын

Love the Luffy T-Shirt Ed💪🏾💪🏾

@padione3540 Жыл бұрын

Live stream? Yes please!

@joaoarthurbandeira 5 ай бұрын

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

@ChrisHaupt Жыл бұрын

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

@EternalCoders 7 ай бұрын

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

@animegeek-011 Жыл бұрын

My man moved to UK looking for the one piece.

@grungemax Жыл бұрын

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

@paulokrieger Жыл бұрын

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

@mariaj.7662 Жыл бұрын

cool tshirt

@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?

@grim.reaper Жыл бұрын

Yes yes yes on live streaming 🥳

@abdelrhmansaleh1730 3 ай бұрын

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

@Muhammed-nani964 Жыл бұрын

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

@Threenineswon20racks 9 ай бұрын

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

@kasper369 Жыл бұрын

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

@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

@souhailDevv Жыл бұрын

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

@blackpurple9163 11 ай бұрын

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

@atticuus Жыл бұрын

thank you

@stevensoekha7452 Жыл бұрын

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

@AyushKumar-dp2gv 9 ай бұрын

Woah he's wearing one piece t-shirt

@FzsHotDogInDonut 11 ай бұрын

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.

@ilyas8523 5 ай бұрын

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

@sooyoung2648 Жыл бұрын

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

@BreakingElegance Жыл бұрын

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

@serychristianrenaud Жыл бұрын

thanks

@maxtsh Жыл бұрын

awesome

@paramsingh4104 10 ай бұрын

Video starts at 1:11

@kobibr9362 Жыл бұрын

Have you tried Rive?

@hamzabadii3575 Жыл бұрын

Just wow 😳 post many videos

@jssecrets Ай бұрын

UK visa?) Where are you from initially?

@muhammadumar5385 Жыл бұрын

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

@chaseliu5011 9 ай бұрын

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

@peyo77380 Жыл бұрын

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

@chimenemokandu3791 Жыл бұрын

Amazing ✨️ 👏

@Clout-000 3 ай бұрын

how can i get that json?

@constantineJohn Жыл бұрын

Use Rive next time

@DryHub Жыл бұрын

It is compatible with Next Js ??

@aryanmehta8246 Жыл бұрын

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

@wfl-junior Жыл бұрын

Do the after effects video

@shubhamrasal8930 Жыл бұрын

It's lit bro

@syamen333 Жыл бұрын

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

@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?

@draftermyself Жыл бұрын

like before watching! ☺🔥💥👋👋👋

@juanmacias5922 Жыл бұрын

Rive is better :D

@jannickpedersen4620 3 ай бұрын

Fo sho more easy than your Rive video LOL

@developedbyed 3 ай бұрын

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 11 ай бұрын

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