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

Поделиться
HTML-код
  • Опубликовано: 29 сен 2024
  • I still can't believe how simple AutoAnimate is. If you like this check out my Twitter where I talk about stuff like this every day / t3dotgg
    Link to AutoAnimate auto-animate.f...
    Keywords: REACT ANGULAR VUE JAVASCRIPT TYPESCRIPT ANIMATION ANIMATE AUTOMATICALLY ANIMATE SIMPLE ANIMATIONS DRAG AND DROP ANIMATIONS CSS HTML VANILLA JS
    LIVE EVERY WEDNESDAY AT ROUGHLY 1PM PT
    Twitch: / theo
    Twitter: / t3dotgg
    Instagram: / fakiebigfoot
    Everywhere else: t3.gg/links
    And obv shoutout Idez as always 🙏
    FULL VOD: • STREAM VOD 7-24 - Easy...

Комментарии • 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.

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

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

    Noice thanks d00d!

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

    Wtf are these thumbnails 🤣

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

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

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

    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.

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

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

    This is indeed REALLY cool! 🤯

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

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

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

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

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

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

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

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

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

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

    This is dope, thanks for sharing 🙏

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

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

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

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

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

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

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

    Theos descent into thumbnail madness... 😆

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

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

    Is this... Sorcery???

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

    This was super helpful. Thanks !

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

    more like 3 lines of code including the import

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

    Looks similar to react native’s layoutanimation

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

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

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

  • @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 :)

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

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

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

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

    Wow.this is great

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

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

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

    wthhhhhhhhh

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

    I need something like that for Blazor :O

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

    Is there something similar for react native?

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

    feels like bootstrap for CSS animation

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

    Thanks, I will definitely use it

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

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

    Can anyone tell me what vscode theme he uses?

  • @BigBahss
    @BigBahss 11 месяцев назад

    This blew my mind. this is amazing

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

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

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

    svelte has this native and customizable

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

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

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

    Vue transition does this, btw

  • @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 🤷‍♂️

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

    Ok, wtf

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

    Ooh wow niice

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

    dope stuff

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

    Wow! This is awesome! Thanks!

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

    Insane! Thanks, man.

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