How to run a callback after router.push provided by next/navigation?

Question

Objective

Implement page transition animation in next app router

---

Issue

<button onClick={() => {
  router.prefetch(url);
  animationOne(() => {
    router.push(url).then(() => {
      animationTwo();
    })
  })
}}>

animationOne is the page exit animation and animationTwo is page mounting animation. Both of these animation animates a svg element (a circle that grows to viewport size) using gsap.

Due to the change in URL, animationTwo never runs as the function scope (router.push) is lost. How can I resolve this?

One probable solution I could think of is to define animationTwo in template.js that wraps the page component.