Any advice on animating exit / enter view transitions with expo-router's <Slot />?

[xzilja]

I'm trying to create simple "view" transition when expo's route changes, so far got to code below. It does animate out and in as expected when pathname changes, but content of the page changes instantly i.e. when exit animation starts, new content is already rendered on the page. I was expecting exitBeforeEnter to preserve existing content (kinda like <PreviousSlot /> or something like that), but perhaps I'm missing something here?

Curious to see if anyone was able to achieve this effect.

import { Slot, usePathname } from 'expo-router'
import { AnimatePresence, MotiView } from 'moti'

// -- Component -----------------------------------------------------------------
export default function Layout() {
  const pathname = usePathname()

  return (
      <AnimatePresence exitBeforeEnter={true}>
        <MotiView
          key={pathname}
          exit={{ opacity: 0 }}
          animate={{ opacity: 1 }}
        >
          <Slot />
        </MotiView>
      </AnimatePresence>
  )
}

[nandorojo]

that seems right. what if you did mode=wait instead? it’s possible that’s just for newer versions of animate presence, just an idea

have you tried logging pathname?

[nandorojo]

side note: i don’t think animate presence is performant enough for such a top level animation. what if you instead just absolute positioned a view and animated it in / out somehow? or perhaps a reanimated 3 layout transition would be better

[xzilja]

Was trying to achieve this with reanimated's layout transitions, but can't seem to be able to replicate exitBeforeEnter behaviour of moti without using cached "Slot" for previous view or absolute positioned views like you suggested. TL;DR was hoping to keep it simple 😅

Could you expand on mode="wait" bit please? Tried searching for something like this in moti's docs but nothing comes up, perhaps its something unrelated to moti?

Logged the pathname, it updates correctly. Actual exit and enter animations do get triggered, but "previous view / slot" is not persisted for exit animation, it changes to new one right away while it is exiting.