Element no longer animates up and down when using "auto"

[WhereCanI]

react-animate-height no longer animate up and down when used with React. It is the same problem with the demos provided here: https://muffinman.io/react-animate-height/#demo-3. They no longer animate up and down pending on the content.

Expected behavior Animating from height 0 to height "auto".

Your Environment

• Version used: 3.2.2
• OS: Windows 11
• Browser Firefox 118 & Chrome 117

Additional context I have checked that the container is following the guidelines, and I have even tried removing all styling such as padding, margin, display, flex from parent containers. Nothing seem to work to make react-animate-height animate from 0 to "auto".

[Stanko]

Hey, I’m not near my laptop, but if I understood correctly, you want to animate height on content change.

That is not supported out of the box, but it can be achieved by using ResizeObserver.

Check the documentation for the code example: https://github.com/Stanko/react-animate-height#animate-height-on-content-change

Cheers!

[WhereCanI]

No, it's not what I mean. What I mean is that I no longer can make it animate from 0 to auto. It used to be able to do that, but now it won't do it no matter how I add it to my React projects.

I have tried to troubleshoot by making sure there are no CSS that can break the calculation. But it does not make a difference.

I have a suspicion that it might break the animation if the change between 0 and auto is triggering React to rerender.

[Stanko]

Please create provide a sandbox (https://codesandbox.io/), because I have no idea what the problem actually is.

[eseQ]

I faced same issue but there was because i used '0%' instead of 0 as number

[IsabellaRey]

Hi, is this being looked into? I think I'm facing the same problem as described. I'm upgrading from v2.0.7 to v3.2.3 and the animation when opening/closing is no longer there

For example:

<AnimateHeight height={props.isExpanded ? 'auto' : 0} duration={3000} delay={2000}>
    <MyStuff....>
</AnimateHeight>

just flicks between open and close, with no smooth animation

[Stanko]

Hey, I'm not working on it as I can't reproduce it.

Can you please try to fork this codepen to recreate the issue you are having https://codepen.io/stanko/pen/NWmaGjX

Once I know what is wrong I'll look into fixing it.

Cheers!

[edwiles]

I'm a colleague of @IsabellaRey - turns out that we're using a virtual desktop in which the Windows setting "Animation effects" was disabled by default. Your codepen above works if Animation effects is on, but not if it is off (unlike 2.0.7 which works either way). I presume this is due to a change in how the animation is produced?

[Stanko]

Hi @edwiles, That is correct, the library respects user's preferences to reduce motion. The actual code is here:

https://github.com/Stanko/react-animate-height?tab=readme-ov-file#reduced-motion

I won't be providing a way around it, as it would break accessibility.

Hope that makes sense, cheers!

[Stanko]

Hey @WhereCanI Could it be that you also had "reduce motion" option enabled?

[Stanko]

I'm closing this issue for now, if you can create a way to replicate it, I'll dig deeper. Thank you!