0

(1) I have a standard page transition animation wrapping my Switch / in App /. That page transition applies on each Route /.

(2) I then have animations inside specific components. For example I have a multi-stage transition inside of LandingPage / that also triggers on mount.

The problem is that the animation for the standard page transition in (1) happens at the same time as the specific animation inside a specific component (2).

I can't use useChain because the transitions aren't in the same component.

Is there a way to make sure that animation (2) only occurs after animation (1) completes (even though (1) is in a parent component)?

Cheers

Z.M
  • 13
  • 2

1 Answers1

0

I would introduce a state to the App component. For example routeAnimating. I would set it true at the beginning of each route change. And I would set it false at the onRest callback of the main useTransition. You can pass routeAnimating down to each page as a property. And it can trigger the animation in the page.

I hope it works. Let me know if you try it.

Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36