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.
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.
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.
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.
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.
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._
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!
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.
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
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.
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
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
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?
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
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
I'll provide a timestamp for when Theo starts glazing something.
edit: 0:40
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.
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.
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.
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.
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.
@theunstoppablebrigade4277 Ah interesting. Thank you for the clarification
Had a hard time getting tailwindcss-animate and tailwindcss-animated to work, don't know why. tailwindcss-motion did just work for me.
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._
@@anton-sarg Wdym? Can you explain what is so hard in getting it to work?
I swear his thumbnails are reaching a different level now.
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!
16:28 but the [&>h1] is just basic Tailwind? My guess is that this would also work for tailwindcss-motion
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.
Theo, you really got a whole university of content going on here. Great stuff! Keep it going 👍🏻
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
PicThing is the best ass
PicThing is the best ass
Great thumbnail
stagger animation on that grid of images would look good imo
watching theo's videos withing 10 minutes of posting will land me a job
Nah, more like becoming Ex-Muslim will give you more chances.
@@bugged1212 L human
Thank you, Theo, for introducing me to Glaze! Rombo looks pretty cool too, but needs some maturing.
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.
Doesn’t starting-style and transition-behavior solve this in CSS natively now (soon depending on browser)?
Jeeez finally. I was looking for solution like this one for a long time. I wasn't happy about tailwind-animate
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
Little James Blake - James Blake homage here
Next level thumbnail
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
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?
The've just added custom animations (with a slider to customize them) it's in the exact page that theo was on
12:27 unless you use Svelte
but will it animate the component mount/unmount?
data-removed="true"
class=`data-[removed='true']:motion-fade-out`
No?
the thumbnail goes hard lmao
I'm feeling a merger with (framer) motion. Kinda funny how Rombo snagged the tailwind plugin name lol
Framer motion inlines all transforms though, destroying tw class-based transforms
What theme is that in the IDE
Fade out? I think you mean Ph4se out 😏
nuh glaze is insanity
I can see a lot of strong opinions coming.
Just use motion (previously framer -motion)
You are missing Custom Animation Part from rombo
Glad you didn't post a link, searching is so much more fun 👍
What is that browser he uses?
Isn't framer motion enough?
Which is this VS Code theme?
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?
I need more dependancies for my css
Finally not cringe thumbnail
Where's the audio?
You didn’t tell us what you using in picthings
PSA: you should not have multiple h1 tags on a page 🙏
Tailwind is still trying to keep up with UnoCSS and they had this for years 😂
Have you ever heard of tailwind-animated? Xd
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
You lost me at caring about the viewport size
9:44 had me laughing
wait until you learn about unocss
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
thanks for the video
tailwind 4 you just use css. Bye bye config file (It still works though)
could we drop twitter for 2025?
13:28 vue *cough*
people will do everything except write some fucking css man lmao
Because CSS sucks
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.
NOOOOO!
is it just me or does tailwindcss-motion not work? their website animations aren't working and the package doesnt work in my environment
tl;dr trade offs
The whole video is,
Loop {
opinion, realice is wrong,
}
3 views in 34 seconds? fell off.
3000 views in an hour? Great job t3 keep it up and
F the haters
You’re not funny, or original
@@scottl.696 I hate it, play the music 😂🤣
26,333 views in 10 hours? Bro fell off 😔
🤬🤭😦
Second Yeah!!
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