Animate ANYTHING in TWO Lines Of Code!?!???

Поделиться
HTML-код
  • Опубликовано: 17 ноя 2024

Комментарии • 73

  • @justin-schroeder
    @justin-schroeder 2 года назад +317

    Wow - awesome. I'm the AutoAnimate library author and watch this channel so it was a fun surprise to see my library pop up on here. Thanks Theo!

    • @sarcasticdna
      @sarcasticdna 2 года назад +45

      All the devs who hate css give this man a medal 🥉

    • @stephan3199
      @stephan3199 2 года назад +3

      You are a legend my man

    • @alexloukum7673
      @alexloukum7673 2 года назад +3

      Thx Justin
      Huuuuge freakin work

    • @zkoolkyle1
      @zkoolkyle1 2 года назад +2

      Great stuff! Love the documentation site design as well 💪🏻

    • @vezmusic5229
      @vezmusic5229 2 года назад

      I have been afraid of automations for years until now.

  • @moodynoob
    @moodynoob 2 года назад +24

    This library is amazing - as someone who detests CSS, it looks like a convenient way to animate my side projects. The other libraries I've tried out don't come close to this.

  • @universecode1101
    @universecode1101 2 года назад +19

    This is in my TOP 3 of your best THUMBNAILS 😜

    • @t3dotgg
      @t3dotgg  2 года назад +2

      Wait til you see the next one 😂😂😂

    • @alextana746
      @alextana746 2 года назад

      the table one is hands down the best

  • @csIn84
    @csIn84 8 месяцев назад

    Absolutely love this! They've greatly expanded the supported frameworks, too, so it's definitely still actively maintained.

  • @ProgrammerInProgress
    @ProgrammerInProgress 7 месяцев назад

    Great tip. I was struggling to find a good out-of-the-box library for React app Animations. Thank you.

  • @tonero5651
    @tonero5651 2 года назад +2

    Finally a short clip from Theo !!.
    PS: I watch your full streams btw

  • @FlorinPop
    @FlorinPop Год назад +2

    This is indeed REALLY cool! 🤯

  • @sealuke2724
    @sealuke2724 2 года назад +3

    Looks useful when it comes to small size app. Thank you!!!

  • @azs3756
    @azs3756 2 года назад +7

    Thumbnail is like one of those clickbait youtube videos titled "GIVING OUT 10,000$ TO STRANGERS AND THIS HAPPENED (gone wild)"

    • @t3dotgg
      @t3dotgg  2 года назад +1

      To be fair this library deserved that type of clickbait. Seemed impossible tbh

  • @BigBahss
    @BigBahss Год назад

    This blew my mind. this is amazing

  • @Atmos41
    @Atmos41 2 года назад +6

    This is dope, thanks for sharing 🙏

  • @theabhayprajapati
    @theabhayprajapati 2 года назад

    feels like bootstrap for CSS animation

  • @samrathchauhan1271
    @samrathchauhan1271 2 года назад +15

    Yeah, real nice video. Can make a video where you compare popular animation libraries and their performance issues. That will be sick no?

    • @t3dotgg
      @t3dotgg  2 года назад +12

      That would be sick but I am not smart enough nor do I care enough tbh

    • @t3dotgg
      @t3dotgg  2 года назад +7

      Also the DX matters more imo

  • @amineamine58
    @amineamine58 Год назад +1

    This was super helpful. Thanks !

  • @oliver1453
    @oliver1453 2 года назад +3

    Theos descent into thumbnail madness... 😆

  • @ISKLEMMI
    @ISKLEMMI 2 года назад +4

    This was a great video! From the title, I thought you were randomly using Svelte. 😂

  • @BrandonRobertsDev
    @BrandonRobertsDev 2 года назад +11

    I like how you included Angular in the thumbnail despite your disdain for the framework lol
    Nice touch

    • @alissonprimo
      @alissonprimo Год назад

      it just doesn't work with angular but its nice anyway 😅

  • @blazi_0
    @blazi_0 2 года назад +4

    Do it with framermotion in 3 lines of code 😅
    God the world is changing fast

  • @foo3268
    @foo3268 2 года назад +3

    looks like a great lib, does it work well with chakra?

  • @milad8436
    @milad8436 2 года назад

    This is what I was looking for. You are the best. God bless you

  • @MiSt3300
    @MiSt3300 2 года назад

    Thanks, I will definitely use it

  • @0xPanda1
    @0xPanda1 2 года назад

    dude thank u so much this saved me a lot of time😄

  • @luizfernandonoschang8298
    @luizfernandonoschang8298 2 года назад

    Wow! This is awesome! Thanks!

  • @AvinashSewpersadh
    @AvinashSewpersadh 2 года назад +1

    Wow.this is great

  • @donner7708
    @donner7708 2 года назад +1

    Can it handle page transitions? Because that's truly why I love Framer motion is the transitions between my react router links

  • @bolutifelawrence9015
    @bolutifelawrence9015 2 года назад

    Insane! Thanks, man.

  • @Duck-tw3vn
    @Duck-tw3vn 2 года назад +1

    Looks similar to react native’s layoutanimation

  • @mariaarkadieff1572
    @mariaarkadieff1572 Год назад

    Hey, amazing! Can I use the library with React & Vite, too?

  • @JoesUltimatum
    @JoesUltimatum 2 года назад +2

    Is this... Sorcery???

  • @williamlarsson3620
    @williamlarsson3620 Год назад

    Soo not just 2 lines of code, when you import a library… Looks more like a sponsored ad.

  • @Qrzychu92
    @Qrzychu92 2 года назад

    I need something like that for Blazor :O

  • @seanki
    @seanki 2 года назад +1

    Sadly this doesn't seem to be compatible with next version 12.1.6 (react 18.1), I would really like to use it for its simplicity and it looks really smooth, some tweaking required or have I done something dumb? Using npm and not yarn if it makes a difference.

    • @t3dotgg
      @t3dotgg  2 года назад +1

      -force. Surprised you haven’t had peer dep issues before this is a very common thing

    • @seanki
      @seanki 2 года назад

      @@t3dotgg I’ve probably been living in a bubble world, I’ll read up on that later and try it out. Thanks for replying :)

  • @bertcano
    @bertcano 2 года назад

    Noice thanks d00d!

  • @110110010
    @110110010 2 года назад

    wouldn't just ref={autoAnimate} work as a callback ref?

  • @ElioStalteri
    @ElioStalteri 2 года назад

    svelte has this native and customizable

  • @nekonovi5038
    @nekonovi5038 2 года назад +1

    Hey Theo, have you ever used web workers in React? I was doing a small reasearch in past month an could not find a good library for web workers. i.e. I tried to move some code that was doing some PDF generation.

    • @sarcasticdna
      @sarcasticdna 2 года назад

      @@Almighty_Flat_Earth let that frustration out buddy

  • @saaika5922
    @saaika5922 Год назад

    Is it possible to use custom module.css keyframes for animation for enter and leave in React or everything must be css-in-js?

  • @JoeMcBroom
    @JoeMcBroom 2 года назад

    Vue transition does this, btw

  • @archmad
    @archmad 2 года назад +1

    more like 3 lines of code including the import

  • @bryanenid1228
    @bryanenid1228 2 года назад

    Is there something similar for react native?

  • @Zawodowieec
    @Zawodowieec 2 года назад

    dope stuff

  • @scyence69
    @scyence69 2 года назад

    Can anyone tell me what vscode theme he uses?

  • @ManishGupta-nv5by
    @ManishGupta-nv5by 8 дней назад

    boring package just good if you are adding something otherwise you have to write code .. i might go learn some animations then wasting my time to learn this

  • @aliveyeyt4136
    @aliveyeyt4136 2 года назад +1

    did you delete the react file structure vid?

    • @Will4_U
      @Will4_U 2 года назад +1

      nope, it's unlisted.

    • @aliveyeyt4136
      @aliveyeyt4136 2 года назад

      @@Will4_U why?

    • @L33tRose
      @L33tRose 2 года назад

      @@aliveyeyt4136 dont want to speak for Theo but there was a surprising amount of backlash in the comments about the vid. People weren't too happy with the way he presented his criticism of WDS's vid. He probably just grew tired of getting those comments and unlisted it for his mental.
      Maybe he'll redo that vid in the future 🤷‍♂️

  • @bronifty598
    @bronifty598 2 года назад

    Ooh wow niice

  • @animeshtimsina3660
    @animeshtimsina3660 2 года назад

    any similar library for react native?

    • @dealloc
      @dealloc 2 года назад +1

      Framer Motion.

  • @bobs619
    @bobs619 2 года назад

    Can't NPM install it bro. Not gonna "command with --force, or --legacy-peer-deps"

    • @t3dotgg
      @t3dotgg  2 года назад +2

      This is really common with packages that selected a React version. You can override it in the package.json, very common. They're fixing it in Beta 2.
      Also next time ask a question when you don't understand things, bro.

  • @plusquare
    @plusquare 2 года назад +4

    Wtf are these thumbnails 🤣

  • @johnddonnet5151
    @johnddonnet5151 2 года назад

    Ok, wtf

  • @mr.soumikdas
    @mr.soumikdas Год назад

    wthhhhhhhhh

  • @adimardev1550
    @adimardev1550 Год назад

    i aggree. i love animation. but to be honest, All react animation sucks! framer-motion, react-spring etc... it makes the code looks awful. the libraries are big, luggy, unintuitive, awful design pattern.

  • @typicallunchbox6934
    @typicallunchbox6934 2 года назад

    I battled to implement it smoothly with getting a , Window.getComputedStyle: Argument 1 is not an object Error. There obviously something dumb I am missing