search

new-data-services / tailwindcss-animated

Extended animation utilities for Tailwind CSS
https://tailwindcss-animated.com
MIT License
744 stars 10 forks source link

[Feature Request] Ability to combine several animations #1

Closed SushiWaUmai closed 1 year ago

SushiWaUmai commented 1 year ago

Does this library offer the ability to combine several animations?

heidkaemper commented 1 year ago

Not yet. And I'm not sure what the class syntax should look like with multiple animations. Do you have any idea about this?

SushiWaUmai commented 1 year ago

I thought of applying multiple animation classes on one element. Is that not possible?

heidkaemper commented 1 year ago

Hmmm, then each animation would have to know if there was an animation before and how long that lasted. I'm not sure if this is possible..

But we'll give it a try!

SushiWaUmai commented 1 year ago

I actually thought of having multiple effects being applied at the same time, but I think chaining animations is also another missing feature.

heidkaemper commented 1 year ago

Okay, got it. The easiest way to combine (or chain) animations would be nesting:

<div class="animate-spin">
  <div class="animate-jump animate-infinite">
    ...
  </div>
</div>

And of course you can always extend your tailwind.config.js and define custom animations.

I honestly don't see any other way. Multiple animations with several parameters (sequential, simultaneous, with delay, and so on..) would increase the complexity a lot. And we try to keep this plugin as simple and understandable as possible.