3

I've created a basic Gatsby App, which is utilising Client-Only Routes with Reach Router.

I've updated my gatsby-browser.js to reflect the following:

export const wrapPageElement = ({ element }) => {
    <AnimatePresence exitBeforeEnter>{element}</AnimatePresence>
}

The above preserves Animate Presence from be unmounted and this allows both the enter and exit animations to work, but only for pages that are static and not using reach router.

The exit animation does not work for any none static pages within my /app directory and I believe it may have something to do with my router:

import { Router } from '@reach/router'
const App = () => {
    return (
    <Router basepath="/app" primary={true}>
        <PageOne path="/one"/>
        <PageTwo path="/two"/>
    </Router>
    )
}
export default App

just for context the framer-motion animation is as follows:

<motion.div
  variants={PAGE_TRANSITION_VARIANTS}
  initial={"initial"}
  animate={"animate"}
  exit={"exit"}
  transition={PAGE_TRANSITION}
>
  <img src={icon} alt="Gatsby icon" />
</motion.div>

As stated this works perfectly fine on static pages, but upon viewing pages routed by Reach router it presents the enter animation but not the exit when leaving.

Has anyone encountered this issue and/or knows any potential fixes? Could this be something to do with Reach Router and Location?

Any guidance or help is appreciated!

Ferran Buireu
  • 14,305
  • 5
  • 20
  • 41
HireLee
  • 489
  • 1
  • 9
  • 22

1 Answers1

0

Have you tried adding a unique key to the router components? If AnimatePresence has multiple exiting/entering components, it needs to be able to identify each component uniquely via their keys.

Quan Cao
  • 45
  • 5