Easy React Animations Unlocked! You have to check out this library
Вставка
- Опубліковано 14 тра 2023
- 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 - Наука та технологія
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
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! 😉🔥
Lottie is amazing ed, we definitely need more videos on this and tailwind
Holy cow! This is amazing Ed! I could use these for my portfolio haha. thank youu
first time heard about lottie looks amazing 🔥
Damn. this is pretty awesome, Thanks Dave. Great content.
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!
This is fantastic Ed!
This is so cool thank you for showing us
great tut, thanks ED
an amazing person for real, love to watch you videos, now that you got VISA you better make more videos 🤣🤣love you man
it is absolutely fantastic!!
Hey Ed, man i love your tuts, yah i think you should make the aftereffect video so that we make our own custom animations
Welcome to the UK! You timed it well for our 2 British summer months 😂
Hello Dev Ed. Always nice watching your videos
I definitely want an after affects lottie turtorial!!!
thank you for your excellent tutorial😍 lottie is amazing🤩
Thanks Ed , and yeah AfterEffects tutorials would be extremely cool!!!.
Nice work bro ❤❤
mennn im in love in use it for the last 10 month for different project ;) u can do scroll event too
amazing content, at the right time 🎉
Welcome to the UK! We have the best weather here ;-)
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 🙌🏽
dope i have to try this lottie with react!
Hi Ed, welcome to the UK! If you're comfortable with micro frontend in react, can you do something on it?
Love ur animation series please make a clone of a awward winner site
When you're youtubing for help on a project and you see a developedbyed video
Thank you that's pretty good!
need more react animation courses for landing pages and texts
Amazing video bro and that luffy shirt 🔥
Great stuff. After effects tutorial please. That would be amazing.
Dev , if you started streaming , i'll watch you for sure !
Love the Luffy T-Shirt Ed💪🏾💪🏾
Nice! Thanks for your explanation! Its really amazing! Can you share the link from lottie site of this animation? Thank you!
Our OWN animations ? Can't wait to see how it's done 👀
Live stream? Yes please!
What are your thoughts on Rive?
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
Very cool
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
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?
Amazing ✨️ 👏
@NetNinja loves this
Did your package.json receive that Lotti-react package by adding the animation plugin into your assets ?
thanks
Small and jucy just focued on one thing. Enjoyed the video. Num num num. Yami
thank you
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
Welcome to the UK! Questionable choice, but each to their own 😂
well it will be fun if you do live stream daily with project or talk about tech and code :)
Yes yes yes on live streaming 🥳
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.
What is that t-shirt about? I love it :)
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?
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?
It's lit bro
awesome
Have you tried Rive?
Hello, how can i stop the animation in certain animation?
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
Welcome to the UK.🎉
awww cheers!
is jack peralta your bro ? JK, always love your videos ❤
Funny enough, Framer Motion was built with Lottie itself
Can you please make a tutorial on how to use Lordicon in a React App 🙏🙏🙏
Hi where did you move to in the UK? :)))
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
Doesnt work well on NextJS due to server rendering. any advice?
Please make the after effect tutorial !
congrats on your visa :)
Luffy! :D
Just wow 😳 post many videos
guys can anyone tell me how is this null safety auto compelete happening while he is typing
Yeah pljjj make an Ae tutorial on hiw to make an animated svg😊
"Check a look" 😂😂😂
cool tshirt
It is compatible with Next Js ??
how can i get that json?
My man moved to UK looking for the one piece.
UK visa?) Where are you from initially?
Do the after effects video
Use Rive next time
congratulations for your visa which city you are in UK??
Woah he's wearing one piece t-shirt
Video starts at 1:11
VS code theme name please??
I think it's material theme
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?
like before watching! ☺🔥💥👋👋👋
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...
Rive is better :D
Fo sho more easy than your Rive video LOL
Hahahha I agree!
One piece
yo! man are you a one piece fan🤔
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!