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