New package makes animation easy in Tailwind?? 👀

[@ykcirodd]

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

[@karolus__]

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.

[@JakobRossner-qj1wo]

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]

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]

@theunstoppablebrigade4277 Ah interesting. Thank you for the clarification

[@AntonSarg-e5n]

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]

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]

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

[@shubhsharma19]

I swear his thumbnails are reaching a different level now.

[@TrackDayMaker]

PicThing is the best ass

[@bkschatzki]

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.

[@AntonSarg-e5n]

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

[@mayer9876]

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.

[@theDanielJLewis]

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!

[@claasdev]

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

[@phoenix2558]

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

[@h7hj59fh3f]

stagger animation on that grid of images would look good imo

[@tedspens]

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

[@asciimage]

Great thumbnail

[@BurningBOB]

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.

[@LEDsellers]

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

[@DEVDerr]

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

[@shinsoking5816]

What theme is that in the IDE

[@eXquisiteBuddy]

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]

12:27 unless you use Svelte

[@newbeat887]

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?

[@dancingsamba]

Little James Blake - James Blake homage here

[@alexaka1]

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

[@jazzymichael]

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

[@AvanaVana]

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

[@samirram007]

You are missing Custom Animation Part from rombo

[@gro967]

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

[@jenewland1999]

Fade out? I think you mean Ph4se out 😏

[@michabbb]

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

[@aqua-bery]

I need more dependancies for my css

[@ProgrammingWIthRiley]

I can see a lot of strong opinions coming.

[@EONINSIGHTS]

nuh glaze is insanity

[@jakubczarlinski]

Next level thumbnail

[@johnrio]

You lost me at caring about the viewport size

[@Nooobbbyyy]

the thumbnail goes hard lmao

[@mateopresacastro9335]

Just use motion (previously framer -motion)

[@Александр-ч4п5ъ]

Finally not cringe thumbnail

[@ggnova8581]

You didn’t tell us what you using in picthings

[@sd4545sdf]

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

[@renatocortez5353]

Have you ever heard of tailwind-animated? Xd

[@rickdg]

could we drop twitter for 2025?

[@kippeneneieren2039]

people will do everything except write some fucking css man lmao

[@Lykoskia]

Because CSS sucks

[@nou4605]

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.

[@cbmonyoutube]

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

[@mouradaouinat8721]

tl;dr trade offs

[@aymenbachiri-yh2hd]

thanks for the video

[@ukeshrestha]

9:44 had me laughing

[@FaizKhan-of9qv]

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

[@bugged1212]

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

[@FaizKhan-of9qv]

@@bugged1212 L human

[@justmrmendez]

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

[@mattmmilli8287]

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

[@kidtheday]

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

[@predaytor]

NOOOOO!

[@gFamWeb]

3 views in 34 seconds? fell off.

[@scottl.696]

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

[@user-wn2ho5ij5f]

You’re not funny, or original

[@greendsnow]

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

[@eamonburns9597]

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

[@box4soumendu4ever]

...❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤CSS shortcut is going to rule. Please do something for KZbin premium users. They don't want to embedded commercials. We love you, hide them in comments. So...

[@predaytor]

🤬🤭😦

[@BazieleSaah]

Second Yeah!!

[@calholli]

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