Incorrect child animation when parent element is CSS-translated before auto-animate ref is animated

Author: SBrudi2801Created Sep 9, 2025Updated Nov 27, 2025

Description: When the ref used by auto-animate is embedded inside an element that was previously moved using a CSS transition (e.g., transform: translate), auto-animate does not correctly recognize the current position of the children. This results in incorrect animations: instead of simply fading out (or hiding), the children also shift position unexpectedly.

Reproduction: You can reproduce the issue here: https://codesandbox.io/p/sandbox/65nvyv

Steps:

Open the menu (parent element moves using CSS transition).

Click 'Hide Children'.

The children animate incorrectly – they don’t just disappear, but also move from an unintended position.

Any following hide and show (without animating the menu) actions are animated correctly.

Expected behavior: The children should only animate according to their intended show/hide transition. Their position should not be affected by previous CSS transforms on the parent.

Actual behavior: The children’s position is calculated incorrectly after the parent’s CSS transition, causing them to shift before fading out.

Environment:

auto-animate version: 0.9.0

Browser: Chrome Version 139.0.7258.155 (Offizieller Build) (arm64)

Framework: React

Additional context: This issue occurs specifically when the parent has been moved with a CSS transition before toggling the children.