Did the default animation duration change with v1.1.0?

[lukemorton]

I'm not sure if the default just changed, or if upgrading to v1.1.0 has meant my implementation is broke, but all my animations look like they're in hyperdrive.

I've downgraded for now back to v1.0.1

Any pointers would be appreciated 🙏

[heidkaemper]

With hyperdrive you mean that all animations run way to fast? The defaults have not changed, but you can now set the duration globally.

Would you mind sharing a code snippet with us? Which animation did you use? And which browser (+ version) are you using?

[lukemorton]

Here is one example but it is happening in multiple places:

import { Loader2 } from "lucide-react";

export const LoadingIcon = ({
  size,
}: {
  size?: string | number;
}) => (
  <Loader2
    size={size}
    className="animate-spin"
  />
);

I've just seen the update re animate-duration-* settings affecting all child elements, this might be the issue, I will investigate thanks!

[lukemorton]

Yes I think something like in this comment is happening:

https://github.com/new-data-services/tailwindcss-animated/issues/10#issuecomment-2134730911

The issue now is, sometimes I will animate the container at one speed, and I will animate child elements at another. Should I specify duration everywhere now?

<div className="animate-fade animate-duration-300">
  <div className="animate-spin"></div>
</div>

Previously animate-spin would use default duration. Now it is using 300.

[heidkaemper]

Ah yes, that will be it. Duration, delay, etc. are now values that are also used for child elements.

For many users, this is a plus, because you can for example define a default duration for all animations on the page. But for your scenario it is actually more of a disadvantage.

As a quick solution, I would suggest that you also set animate-duration-x for nested animations.

[Gregory-Gerard]

Hey @heidkaemper,

First of all, thank you for this lib.

I'm experiencing the same problem and after a little research, I've come to the same conclusion as @lukemorton (same usecase, we're using it for spinner and all of our spinners are one hyperdrive). I must admit that this change is rather surprising, on the one hand because such a change should certainly have provoked a major version change as it's a breaking change for existing applications. On the other hand, the animation-duration specification explicitly states that the property is not inherited (see https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration#formal_definition).

The behavior is not really intuitive and not documented, unfortunately. We'll certainly be sticking with the old version, as it involves far too many changes to specify the duration for each child, knowing that this is not the property's native behavior.

I think the subject is closed, but in my opinion this is quite unexpected behavior for most, so I prefer to point it out.

Thanks!

[lukemorton]

We’ve concluded the same as @Gregory-Gerard and have stuck with an older version. Plan is eventually to remove the dependency with a custom utility or just plain tailwind.

[heidkaemper]

Thanks for your feedback guys! I reopen this topic. Maybe it's time for a v2.0 with some new approaches.