How to Trigger Initial Animation on Deeply Nested Component with AnimatePresence initial={false} on Top-Level?

[andrskr]

Hi all,

I’m working on a project where I have a deeply nested component that needs to run an initial animation. However, I was surprised to find out that the animation didn’t trigger. After some investigation, I realized it was due to a top-level AnimatePresence having initial={false}.

It took me quite some time to figure out that the issue was coming from a top-level component. I’m wondering if anyone else has faced this issue and what approaches you've used to handle it. Is there a recommended way to ensure that deeply nested components still run their initial animations while keeping initial={false} at the top level?

Any tips or suggestions would be appreciated!

Here are some examples:

// Animations are disabled for both components 

export function InnerComponent() {
  return (
    <div>
      <m.div animate={{ height: 100 }} className="border border-blue-500 text-2xl">
        Inner
      </m.div>
    </div>
  );
}

export function App() {
  return (
      <AnimatePresence initial={false}>
        <m.div animate={{ height: 300 }} className="border border-red-500 text-2xl">
          Test
          <InnerComponent />
        </m.div>
      </AnimatePresence>
  )
}

// Workaround - wrap the InnerComponent within a separate AnimatePresence

export function App() {
  return (
    <AnimatePresence initial={false}>
      <m.div animate={{ height: 300 }} className="border border-red-500 text-2xl">
        Test
        <AnimatePresence>
          <InnerComponent />
        </AnimatePresence>
      </m.div>
    </AnimatePresence>
  )
}

Thanks!