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

  • @developedbyed
    @developedbyed Жыл бұрын

    Should we start livestreaming on the channel? 👀

  • @carlosavila7573

    @carlosavila7573

    Жыл бұрын

    Please! That would be amazing

  • @kasuba97

    @kasuba97

    Жыл бұрын

    yeah🤗🤗lets go

  • @EnigmaCHIPS.

    @EnigmaCHIPS.

    Жыл бұрын

    Yes we should!

  • @OnlyJavascript

    @OnlyJavascript

    Жыл бұрын

    yeah..love it

  • @jweewee6883

    @jweewee6883

    Жыл бұрын

    yes but A little bit

  • @schnudercheib
    @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

    @lukas.webdev

    Жыл бұрын

    Congratulations. Keep it up! 😉🔥

  • @fortune_hr
    @fortune_hr Жыл бұрын

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

  • @developedbyed
    @developedbyed Жыл бұрын

    Lottie + Framer Motion is just ✨✨

  • @fortune_hr

    @fortune_hr

    Жыл бұрын

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

  • @ajiljagadeesh1143

    @ajiljagadeesh1143

    Жыл бұрын

    Can you make a video on this?

  • @anubhavbansal8922

    @anubhavbansal8922

    Жыл бұрын

    we need a video!!

  • @lionmike247

    @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

    @isaiahmekenye424

    Жыл бұрын

    yes it is 🙌🏽

  • @randolphmaysondy7983
    @randolphmaysondy798311 ай бұрын

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

  • @alishxn
    @alishxn Жыл бұрын

    first time heard about lottie looks amazing 🔥

  • @ajiljagadeesh1143
    @ajiljagadeesh1143 Жыл бұрын

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

  • @mattbainton1632
    @mattbainton16325 ай бұрын

    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!

  • @ogedaykhan9909
    @ogedaykhan9909 Жыл бұрын

    it is absolutely fantastic!!

  • @pablowbk
    @pablowbk Жыл бұрын

    This is fantastic Ed!

  • @samimustafa7284
    @samimustafa7284 Жыл бұрын

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

  • @wayneswildworld
    @wayneswildworld11 ай бұрын

    I definitely want an after affects lottie turtorial!!!

  • @craiggazimbi
    @craiggazimbi Жыл бұрын

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

  • @Rikimkigsck
    @Rikimkigsck Жыл бұрын

    This is so cool thank you for showing us

  • @JBWEBDEVELOPER
    @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

  • @kimballle7714
    @kimballle771411 ай бұрын

    great tut, thanks ED

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

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

  • @jweewee6883
    @jweewee6883 Жыл бұрын

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

  • @omidbonakdar4838
    @omidbonakdar48385 ай бұрын

    thank you for your excellent tutorial😍 lottie is amazing🤩

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

    amazing content, at the right time 🎉

  • @julianvelez6563
    @julianvelez6563 Жыл бұрын

    Nice work bro ❤❤

  • @andreschou9560
    @andreschou9560 Жыл бұрын

    dope i have to try this lottie with react!

  • @NNNedlog
    @NNNedlog11 ай бұрын

    Hello Dev Ed. Always nice watching your videos

  • @jatinpanigrahy9871
    @jatinpanigrahy9871 Жыл бұрын

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

  • @tomdringer985
    @tomdringer985 Жыл бұрын

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

  • @andrewaghoghovwia1948
    @andrewaghoghovwia1948 Жыл бұрын

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

  • @ToadyEN
    @ToadyEN Жыл бұрын

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

  • @kashivitagors7823
    @kashivitagors78233 ай бұрын

    Thank you that's pretty good!

  • @Speaks4itself
    @Speaks4itself Жыл бұрын

    need more react animation courses for landing pages and texts

  • @gokulk2092
    @gokulk2092 Жыл бұрын

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

  • @M4rt1nX
    @M4rt1nX11 ай бұрын

    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

    @artnevka779

    3 ай бұрын

    did you try?

  • @bababouy7704
    @bababouy7704 Жыл бұрын

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

  • @paulokrieger
    @paulokrieger11 ай бұрын

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

  • @voldemortvi4264
    @voldemortvi4264 Жыл бұрын

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

  • @jamesdarrigo8277
    @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

  • @quincy6199
    @quincy6199 Жыл бұрын

    Love the Luffy T-Shirt Ed💪🏾💪🏾

  • @Vatz90
    @Vatz90 Жыл бұрын

    Amazing video bro and that luffy shirt 🔥

  • @developersean
    @developersean Жыл бұрын

    Very cool

  • @padione3540
    @padione3540 Жыл бұрын

    Live stream? Yes please!

  • @ozansozuoz
    @ozansozuoz Жыл бұрын

    What are your thoughts on Rive?

  • @razdingz
    @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

  • @Threenineswon20racks
    @Threenineswon20racks8 ай бұрын

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

  • @chimenemokandu3791
    @chimenemokandu3791 Жыл бұрын

    Amazing ✨️ 👏

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

    Yes yes yes on live streaming 🥳

  • @MTPadDev
    @MTPadDev Жыл бұрын

    Luffy! :D

  • @atticuus
    @atticuus Жыл бұрын

    thank you

  • @Optable
    @Optable Жыл бұрын

    Funny enough, Framer Motion was built with Lottie itself

  • @kasper369
    @kasper369 Жыл бұрын

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

  • @FzsHotDogInDonut
    @FzsHotDogInDonut10 ай бұрын

    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.

  • @serychristianrenaud
    @serychristianrenaud Жыл бұрын

    thanks

  • @blackpurple9163
    @blackpurple916310 ай бұрын

    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

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

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

  • @maxtsh
    @maxtsh Жыл бұрын

    awesome

  • @kaszapnagypeter
    @kaszapnagypeter Жыл бұрын

    Welcome to the UK.🎉

  • @developedbyed

    @developedbyed

    Жыл бұрын

    awww cheers!

  • @AlephNeoDev
    @AlephNeoDev Жыл бұрын

    @NetNinja loves this

  • @ChrisHaupt
    @ChrisHaupt Жыл бұрын

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

  • @shubhamrasal8930
    @shubhamrasal8930 Жыл бұрын

    It's lit bro

  • @cloud244
    @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

    @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

    @chupitolepame5357

    Жыл бұрын

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

  • @joaoarthurbandeira
    @joaoarthurbandeira4 ай бұрын

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

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

  • @aryanmehta8246
    @aryanmehta8246 Жыл бұрын

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

  • @omriri
    @omriri7 ай бұрын

    "Check a look" 😂😂😂

  • @sooyoung2648
    @sooyoung264810 ай бұрын

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

  • @BreakingElegance
    @BreakingElegance Жыл бұрын

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

  • @souhailDevv
    @souhailDevv Жыл бұрын

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

  • @ilyas8523
    @ilyas85234 ай бұрын

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

  • @grungemax
    @grungemax Жыл бұрын

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

  • @kobibr9362
    @kobibr9362 Жыл бұрын

    Have you tried Rive?

  • @Clout-000
    @Clout-000Ай бұрын

    how can i get that json?

  • @EternalCoders
    @EternalCoders5 ай бұрын

    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

  • @peyo77380
    @peyo77380 Жыл бұрын

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

  • @stevensoekha7452
    @stevensoekha745211 ай бұрын

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

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

    My man moved to UK looking for the one piece.

  • @DryHub
    @DryHub11 ай бұрын

    It is compatible with Next Js ??

  • @hamzabadii3575
    @hamzabadii3575 Жыл бұрын

    Just wow 😳 post many videos

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

    cool tshirt

  • @muhammadumar5385
    @muhammadumar5385 Жыл бұрын

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

  • @abdelrhmansaleh1730
    @abdelrhmansaleh1730Ай бұрын

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

  • @AyushKumar-dp2gv
    @AyushKumar-dp2gv8 ай бұрын

    Woah he's wearing one piece t-shirt

  • @paramsingh4104
    @paramsingh41048 ай бұрын

    Video starts at 1:11

  • @draftermyself
    @draftermyself Жыл бұрын

    like before watching! ☺🔥💥👋👋👋

  • @constantineJohn
    @constantineJohn Жыл бұрын

    Use Rive next time

  • @sheikhjamiralam2580
    @sheikhjamiralam2580 Жыл бұрын

    Does it work with NextJs?

  • @bybyers

    @bybyers

    Жыл бұрын

    It technically should.

  • @developedbyed

    @developedbyed

    Жыл бұрын

    It does, just add use client to the top

  • @DotaJungleOfficial

    @DotaJungleOfficial

    Жыл бұрын

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

  • @adityarajawat3185
    @adityarajawat3185 Жыл бұрын

    VS code theme name please??

  • @joshua_226

    @joshua_226

    Жыл бұрын

    I think it's material theme

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

    Do the after effects video

  • @syamen333
    @syamen333 Жыл бұрын

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

  • @chaseliu5011
    @chaseliu50118 ай бұрын

    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
    @juanmacias5922 Жыл бұрын

    Rive is better :D

  • @jannickpedersen4620
    @jannickpedersen46202 ай бұрын

    Fo sho more easy than your Rive video LOL

  • @developedbyed

    @developedbyed

    2 ай бұрын

    Hahahha I agree!

  • @bennettbmadavana7176
    @bennettbmadavana7176 Жыл бұрын

    One piece

  • @phaneendra777
    @phaneendra777 Жыл бұрын

    yo! man are you a one piece fan🤔

  • @automioai
    @automioai Жыл бұрын

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

  • @Yobtuber
    @Yobtuber9 ай бұрын

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

Келесі