Easy React Animations Unlocked! You have to check out this library
ฝัง
- เผยแพร่เมื่อ 1 ต.ค. 2024
- 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
Should we start livestreaming on the channel? 👀
Please! That would be amazing
yeah🤗🤗lets go
Yes we should!
yeah..love it
yes but A little bit
Lottie + Framer Motion is just ✨✨
We need more videos on this !!!!!!
Can you make a video on this?
we need a video!!
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
yes it is 🙌🏽
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!
Congratulations. Keep it up! 😉🔥
Luffy! :D
Lottie is amazing ed, we definitely need more videos on this and tailwind
Video starts at 1:11
Love ur animation series please make a clone of a awward winner site
Thanks Ed , and yeah AfterEffects tutorials would be extremely cool!!!.
first time heard about lottie looks amazing 🔥
Rive is better :D
My man moved to UK looking for the one piece.
What are your thoughts on Rive?
Woah he's wearing one piece t-shirt
cool tshirt
Funny enough, Framer Motion was built with Lottie itself
Hi Ed, welcome to the UK! If you're comfortable with micro frontend in react, can you do something on it?
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
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?
@@ajinkya4658 8MB that's killer, what's your animation about? just out of curiosity
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.
did you try?
It is not possible to handle SVg inner meta tags through css
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
I definitely want an after affects lottie turtorial!!!
@NetNinja loves this
Welcome to the UK! We have the best weather here ;-)
Welcome to the UK.🎉
awww cheers!
I really like the font and backgroud theme you are using, could you please let me know. Thank You
Welcome to the UK! You timed it well for our 2 British summer months 😂
need more react animation courses for landing pages and texts
Doesnt work well on NextJS due to server rendering. any advice?
it is absolutely fantastic!!
Very cool
UK visa?) Where are you from initially?
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?
Hey Ed, man i love your tuts, yah i think you should make the aftereffect video so that we make our own custom animations
guys can anyone tell me how is this null safety auto compelete happening while he is typing
Nice work bro ❤❤
Damn. this is pretty awesome, Thanks Dave. Great content.
Holy cow! This is amazing Ed! I could use these for my portfolio haha. thank youu
Great stuff. After effects tutorial please. That would be amazing.
What is that t-shirt about? I love it :)
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}
/>
How do you load a Vanilla Javascript into a React App?
is jack peralta your bro ? JK, always love your videos ❤
Did your package.json receive that Lotti-react package by adding the animation plugin into your assets ?
Welcome to the UK! Questionable choice, but each to their own 😂
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.
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
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...
Amazing video bro and that luffy shirt 🔥
When you're youtubing for help on a project and you see a developedbyed video
congratulations for your visa which city you are in UK??
great tut, thanks ED
amazing content, at the right time 🎉
like before watching! ☺🔥💥👋👋👋
Can you please make a tutorial on how to use Lordicon in a React App 🙏🙏🙏
It is compatible with Next Js ??
how can i get that json?
Hello Dev Ed. Always nice watching your videos
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
"Check a look" 😂😂😂
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
Yeah pljjj make an Ae tutorial on hiw to make an animated svg😊
an amazing person for real, love to watch you videos, now that you got VISA you better make more videos 🤣🤣love you man
Small and jucy just focued on one thing. Enjoyed the video. Num num num. Yami
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!
Dev , if you started streaming , i'll watch you for sure !
well it will be fun if you do live stream daily with project or talk about tech and code :)
One piece
thank you for your excellent tutorial😍 lottie is amazing🤩
Thank you that's pretty good!
Fo sho more easy than your Rive video LOL
Hahahha I agree!
Hello, how can i stop the animation in certain animation?
Nice! Thanks for your explanation! Its really amazing! Can you share the link from lottie site of this animation? Thank you!
Love the Luffy T-Shirt Ed💪🏾💪🏾
Please make the after effect tutorial !
congrats on your visa :)
Just wow 😳 post many videos
Hi where did you move to in the UK? :)))
awesome
mennn im in love in use it for the last 10 month for different project ;) u can do scroll event too
Do the after effects video
Have you tried Rive?
Our OWN animations ? Can't wait to see how it's done 👀
Yes yes yes on live streaming 🥳
thank you
dope i have to try this lottie with react!
Use Rive next time
This is so cool thank you for showing us
Amazing ✨️ 👏
It's lit bro
Live stream? Yes please!
thanks
This is fantastic Ed!
VS code theme name please??
I think it's material theme
yo! man are you a one piece fan🤔
Does it work with NextJs?
It technically should.
It does, just add use client to the top
@@developedbyed Hello, in NextJs the onMouseOver event and other events doesn't work. Why?
O for sure, we will love a live code with you
Let's go for a pint now that you no longer need to hide! 🫣 Cheers Mate!