↑ ↓ Navigate ↡ Select ESC Close

New package makes animation easy in Tailwind?? πŸ‘€

2024-12-24 Science & Technology
88.3k
2.3k
88
Theo - t3β€€gg
Theo - t3β€€gg
539.0k subscribers

Unlock all features

FREE: Get instant access to 10 AI summaries, chats, or transcripts per day.

Description

Animations have never been easy with tailwind, until now. THANK YOU APPWRITE FOR SPONSORING! Check them out: https://soydev.link/appwrite Check out my Twitch, Twitter, Discord more at https://t3.gg S/O Ph4se0n3 for the awesome edit πŸ™

Top Comments (10)

@ykcirodd 2024-12-24

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

121
@shubhuiux 2024-12-24

I swear his thumbnails are reaching a different level now.

6
@theDanielJLewis 2024-12-24

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!

4
@phoenix2558 2024-12-24

Theo, you really got a whole university of content going on here. Great stuff! Keep it going πŸ‘πŸ»

0
@DEVDerr 2024-12-24

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

0
@bkschatzki 2024-12-24

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.

8
@tedspens 2024-12-24

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

0
@asciimage 2024-12-24

Great thumbnail

4
@mayer9876 2024-12-24

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.

4
@karolus__ 2024-12-24

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.

29 1 replies

Unlock the Data Inside
Turn Videos into Knowledge

  • Get FREE 10/day: transcripts, summaries, chats
  • Chat with videos, export text & PDF
  • $1 free API credit for RAG, chatbots & research

Free forever plan β€’ All features unlocked

App screenshot