[QUESTION] Animation ends event for child

[SerhiiTsybulskyi]

Question

Is there a way natively to know when all parent animations have been completed?

Problem

I have 2 components, one of the components is a drawer and the other sits inside the drawer. The problem is I need to know when the drawer animation is complete before I can load the component since it depends on position calculations.

These components are decoupled/generic components so listening for specific events will tightly couple them.

Thoughts

There are a few potential ideas I had:

• Implement my own animation context in react but this is quite messy and from my understanding motion should already have this context natively.
• Trigger window resize and listen on the child in order for it to know when to calculate but this has potential for causing performance issues and is kinda hacky.

Reproduction

Below you can see a example and video of the situation.

https://codesandbox.io/p/devbox/romantic-clarke-ythv6f

Screen.Recording.2025-03-11.at.17.24.12.mov