New package makes animation easy in Tailwind?? 👀

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

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

  • @ykcirodd
    @ykcirodd 21 день назад +108

    I'll provide a timestamp for when Theo starts glazing something.
    edit: 0:40

  • @bkschatzki
    @bkschatzki 21 день назад +6

    This is legitimately exciting. I almost entirely stopped implementing more involved animations just because the most popular libraries reminded me too much of styling via props, and messing with the tailwind config was tedious. I want to quarantine everything having to do with the elements' appearance to className, save for maybe a variant prop.

  • @karolus__
    @karolus__ 21 день назад +26

    Just as an honest opinion about Picthing, the hero section image significantly undermines the perceived quality of the final outcome when using the product. Background removal tools frequently leave unwanted or unsightly, blurry edges around objects, and the white, blurred outline around the person on a dark background is particularly glaring. This not only detracts from the visual appeal but also raises serious concerns about the overall effectiveness of the product.

    • @Bad4Good2
      @Bad4Good2 18 дней назад +1

      I don’t understand the product at all. You can remove the background on nearly all images with 0 issues on most modern smart phones. This is a solution to a problem that doesn’t exist.

  • @JakobRossner-qj1wo
    @JakobRossner-qj1wo 21 день назад +82

    We now have:
    - tailwindcss-animate
    - tailwindcss-animated
    - tailwind-motion
    - glaze
    Why do we have 10000 tools for the same job? tailwind-motion is just tailwindcss-animate with a few presets and literally the same as tailwindcss-animated. 😂
    For me Glaze is the only one innovating with allowing GSAP inside Tailwind.

    • @theunstoppablebrigade4277
      @theunstoppablebrigade4277 21 день назад +11

      Just to be clear Glaze is not "inside Tailwind" nor does it interact with the Tailwind builder rather it borrows the utility-based concepts we are all used to.

    • @JakobRossner-qj1wo
      @JakobRossner-qj1wo 21 день назад +2

      @theunstoppablebrigade4277 Ah interesting. Thank you for the clarification

    • @anton-sarg
      @anton-sarg 21 день назад

      Had a hard time getting tailwindcss-animate and tailwindcss-animated to work, don't know why. tailwindcss-motion did just work for me.

    • @lightning_11
      @lightning_11 20 дней назад +2

      It's becasue, while every other type of computer engineer said they _enjoyed solving interesting problems,_ software engineers said they enjoyed _solving problems with the newest technology._

    • @JakobRossner-qj1wo
      @JakobRossner-qj1wo 20 дней назад

      @@anton-sarg Wdym? Can you explain what is so hard in getting it to work?

  • @shubhsharma19
    @shubhsharma19 21 день назад +6

    I swear his thumbnails are reaching a different level now.

  • @theDanielJLewis
    @theDanielJLewis 21 день назад +2

    I _just_ implemented (Framer) Motion on my Next.js app for animating a ranking chart for when positions shift around. That was messy and annoying to do it right. Now I wonder if AutoAnimate can do it easier and better.
    And once I opened that animation door, I'm starting to look for more places I can add additional animations to my Shadcn-based UI to make the UX better and even provide subtle guidance.
    So thanks for introducing me to AutoAnimate! That might be the solution for most of my needs!

  • @anton-sarg
    @anton-sarg 21 день назад +5

    16:28 but the [&>h1] is just basic Tailwind? My guess is that this would also work for tailwindcss-motion

  • @mayer9876
    @mayer9876 21 день назад +3

    3:17 You don't have to do that in 'every' project. For the basic animations like fading and translate x/y for example, you could easily make a shared tailwind plugin or preset rather (and add it to some library) with all of your custom animations and import that in your projects tailwind.config. Any customizations could be configured in the dedicated theme overrides of the individual projects. Of course, this is what the animation extensions provide, which is a nice thing. But anything that is not, you can easily put in your own plugin.

  • @phoenix2558
    @phoenix2558 20 дней назад

    Theo, you really got a whole university of content going on here. Great stuff! Keep it going 👍🏻

  • @atharvadeosthale5919
    @atharvadeosthale5919 20 дней назад

    16:10 In a previous video of yours you told how adding styles to parent that apply to the children would be not good as it would create unexpected results in a large codebase. What do you think about this specific example? Do you think it'd rather be good to animate the child components rather than applying that directly to parent? lmk thanks loved the vid

  • @TrackDayMaker
    @TrackDayMaker 21 день назад +17

    PicThing is the best ass

    • @sirrascor
      @sirrascor 20 дней назад

      PicThing is the best ass

  • @asciimage
    @asciimage 21 день назад +4

    Great thumbnail

  • @h7hj59fh3f
    @h7hj59fh3f 21 день назад +1

    stagger animation on that grid of images would look good imo

  • @FaizKhan-of9qv
    @FaizKhan-of9qv 21 день назад +9

    watching theo's videos withing 10 minutes of posting will land me a job

    • @bugged1212
      @bugged1212 21 день назад +2

      Nah, more like becoming Ex-Muslim will give you more chances.

    • @FaizKhan-of9qv
      @FaizKhan-of9qv 21 день назад

      @@bugged1212 L human

  • @tedspens
    @tedspens 21 день назад

    Thank you, Theo, for introducing me to Glaze! Rombo looks pretty cool too, but needs some maturing.

  • @BurningBOB
    @BurningBOB 21 день назад

    its a good start but i ultimatly ended up continueing to use motion plus gsap because this has its limitations not to mention the large amount of mation and gsap examples and docs already available.

  • @claasdev
    @claasdev 21 день назад +3

    Doesn’t starting-style and transition-behavior solve this in CSS natively now (soon depending on browser)?

  • @DEVDerr
    @DEVDerr 21 день назад

    Jeeez finally. I was looking for solution like this one for a long time. I wasn't happy about tailwind-animate

  • @vipzip8863
    @vipzip8863 20 дней назад +3

    0:00 Introducing Tailwind Motion & Alternatives
    0:40 Exploring an All-in-One Backend Platform (Soy)
    1:48 Tailwind Motion: Practical Animation Examples
    3:08 Comparing Tailwind Motion to Other Tools
    4:02 Tailwind Motion Demo and Website Tour
    6:00 Installing and Implementing Tailwind Motion
    8:50 Animation Customization and Documentation
    11:30 Exploring Glaze: A Powerful Animation Library
    15:00 Understanding Glaze's Syntax and Features
    17:15 Comparison of Animation Libraries and Considerations
    Generated by Snorvia AI chapter generator

  • @dancingsamba
    @dancingsamba 20 дней назад +1

    Little James Blake - James Blake homage here

  • @jakubczarlinski
    @jakubczarlinski 21 день назад +1

    Next level thumbnail

  • @LEDsellers
    @LEDsellers 21 день назад

    It seems hard to create some api layer that is both easy to use and extensible enough for expert modification. There needs to be a shadcn of animation libraries created

  • @KristianTheDesigner
    @KristianTheDesigner 8 дней назад

    on the typewriter effect, couldnt you just add a tailwind max-w-[x amount of ch] and it would drop down to the next line..or?

  • @eXquisiteBuddy
    @eXquisiteBuddy 21 день назад

    The've just added custom animations (with a slider to customize them) it's in the exact page that theo was on

  • @a.r.b5653
    @a.r.b5653 21 день назад +1

    12:27 unless you use Svelte

  • @rocket5667
    @rocket5667 19 дней назад

    but will it animate the component mount/unmount?

  • @alexaka1
    @alexaka1 21 день назад +1

    data-removed="true"
    class=`data-[removed='true']:motion-fade-out`
    No?

  • @Nooobbbyyy
    @Nooobbbyyy 21 день назад

    the thumbnail goes hard lmao

  • @jazzymichael
    @jazzymichael 21 день назад

    I'm feeling a merger with (framer) motion. Kinda funny how Rombo snagged the tailwind plugin name lol

    • @AvanaVana
      @AvanaVana 21 день назад

      Framer motion inlines all transforms though, destroying tw class-based transforms

  • @shinsoking5816
    @shinsoking5816 20 дней назад

    What theme is that in the IDE

  • @jenewland1999
    @jenewland1999 21 день назад

    Fade out? I think you mean Ph4se out 😏

  • @EONINSIGHTS
    @EONINSIGHTS 20 дней назад

    nuh glaze is insanity

  • @ProgrammingWIthRiley
    @ProgrammingWIthRiley 21 день назад +1

    I can see a lot of strong opinions coming.

  • @mateopresacastro9335
    @mateopresacastro9335 21 день назад

    Just use motion (previously framer -motion)

  • @samirram007
    @samirram007 21 день назад

    You are missing Custom Animation Part from rombo

  • @michabbb
    @michabbb 21 день назад

    Glad you didn't post a link, searching is so much more fun 👍

  • @jmyrrie
    @jmyrrie 18 дней назад

    What is that browser he uses?

  • @kasper369
    @kasper369 18 дней назад

    Isn't framer motion enough?

  • @pbrockz5156
    @pbrockz5156 20 дней назад

    Which is this VS Code theme?

  • @newbeat887
    @newbeat887 20 дней назад

    tailwindcss-motion, doesn't work with Tailwind V.4 -beta the typography plugin works like this:
    @import "tailwindcss";
    @plugin "@tailwindcss/typography";
    Is there any solution?

  • @aqua-bery
    @aqua-bery 21 день назад

    I need more dependancies for my css

  • @Александр-ч4п5ъ
    @Александр-ч4п5ъ 20 дней назад

    Finally not cringe thumbnail

  • @AnkitKumar-xh4eh
    @AnkitKumar-xh4eh 20 дней назад

    Where's the audio?

  • @ggnova8581
    @ggnova8581 21 день назад

    You didn’t tell us what you using in picthings

  • @johnmcgg
    @johnmcgg 17 дней назад

    PSA: you should not have multiple h1 tags on a page 🙏

  • @gro967
    @gro967 21 день назад

    Tailwind is still trying to keep up with UnoCSS and they had this for years 😂

  • @renatocortez5353
    @renatocortez5353 20 дней назад

    Have you ever heard of tailwind-animated? Xd

  • @sd4545sdf
    @sd4545sdf 21 день назад

    Maybe someone knows how to add color animation only to part of SVG? Something like hover color active effect. Moving it is not so hard

  • @johnrio
    @johnrio 21 день назад +1

    You lost me at caring about the viewport size

  • @ukeshrestha
    @ukeshrestha 21 день назад

    9:44 had me laughing

  • @MrYUPIYU
    @MrYUPIYU 20 дней назад

    wait until you learn about unocss

  • @mattmmilli8287
    @mattmmilli8287 21 день назад

    Why does every video from this man have to be 20-30 mins 😭 should have short blasts of news and your take on things too besides the deep dive video.. just my 2 cents. I guess would take actual editing more :p

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 21 день назад

    thanks for the video

  • @cbmonyoutube
    @cbmonyoutube 21 день назад

    tailwind 4 you just use css. Bye bye config file (It still works though)

  • @rickdg
    @rickdg 20 дней назад

    could we drop twitter for 2025?

  • @reneeschke
    @reneeschke 17 дней назад

    13:28 vue *cough*

  • @kippeneneieren2039
    @kippeneneieren2039 21 день назад +2

    people will do everything except write some fucking css man lmao

    • @Lykoskia
      @Lykoskia 21 день назад +1

      Because CSS sucks

    • @nou4605
      @nou4605 21 день назад

      CSS deez nuts. Honestly we should all ditch HTML CSS and JS. Write apps however the fuck you want, compile to WASM and ship it.

  • @predaytor
    @predaytor 21 день назад

    NOOOOO!

  • @kidtheday
    @kidtheday 21 день назад

    is it just me or does tailwindcss-motion not work? their website animations aren't working and the package doesnt work in my environment

  • @mouradaouinat8721
    @mouradaouinat8721 21 день назад +1

    tl;dr trade offs

  • @justmrmendez
    @justmrmendez 21 день назад

    The whole video is,
    Loop {
    opinion, realice is wrong,
    }

  • @gFamWeb
    @gFamWeb 21 день назад +56

    3 views in 34 seconds? fell off.

    • @scottl.696
      @scottl.696 21 день назад +5

      3000 views in an hour? Great job t3 keep it up and
      F the haters

    • @user-wn2ho5ij5f
      @user-wn2ho5ij5f 21 день назад +4

      You’re not funny, or original

    • @greendsnow
      @greendsnow 21 день назад

      ​@@scottl.696 I hate it, play the music 😂🤣

    • @eamonburns9597
      @eamonburns9597 20 дней назад +1

      26,333 views in 10 hours? Bro fell off 😔

  • @predaytor
    @predaytor 21 день назад

    🤬🤭😦

  • @BazieleSaah
    @BazieleSaah 21 день назад

    Second Yeah!!

  • @calholli
    @calholli 21 день назад

    Any time I see the little spin or bounce gimmicks.. I run away from the page. Because it's such a d3ad giveaway that you're either on an ad or some sit3 that is trying to sell you something.. Seeing you replay the blur over and over on your pics, just tells me that I'm not cut out for this. lol. I could not care any less about little details like that and I don't even notice them.. and certainly don't appreciate them at all when they are there. I like things to be simple and just work. All these little contrivances are just inefficient bulk bloat IMO. Merry Christmas