Framer motion and exit property not working with InertiaJs

Question

I would like to know how can I use "exit" property with framer motion and InertiaJs / ReactJs please.

Currently I have two pages :

profil.js

const { pathname } = window.location
...

<div>
    <motion.div className="flex flex-col" layoutId={`title-3`}
            initial={{opacity: 0}}
            animate={{
                y: [-20, 0],
                opacity: [0, 1]
            }}
            exit={{scale: 2}}
            key={{pathname}}
            transition={{duration: 0.2, ease: "easeOut", delay: 0.1}}
>
    <span>Profil</span>
    </motion.div>
</div>

home.js

const { pathname } = window.location
...

<div>
    <motion.div className="flex flex-col" layoutId={`title-3`}
            initial={{opacity: 0}}
            animate={{
                y: [-20, 0],
                opacity: [0, 1]
            }}
            exit={{scale: 2}}
            key={{pathname}}
            transition={{duration: 0.2, ease: "easeOut", delay: 0.1}}
>
    <span>Home</span>
    </motion.div>
</div>

And I set AnimateSharedLayout on my App (app.js) :

import { AnimateSharedLayout } from 'framer-motion';

return render(
    <Provider store={store}>
        <AnimateSharedLayout>
            <App {...props} />
        </AnimateSharedLayout>
    </Provider>, el
);

When I click on "home" or "profil" in the sidebar, I see the animate, but I don't see the exit animation.

I use InertiaJs and ReactJs.

Do you have an idea why I don't see the exit ?

Answer 1

Once you click away from "home" or "profile", that element is removed from the DOM right away, so it won't be there long enough to see the animation.

Framer Motion Docs

By wrapping motion components with AnimatePresence, they gain the use of an exit property that can define either a set of values or a variant name to animate to before being removed.

Try wrapping your <motion.div>s with <AnimatePresence> like this:

const { pathname } = window.location
...

<div>
    <AnimatePresence>
    <motion.div className="flex flex-col" layoutId={`title-3`}
            initial={{opacity: 0}}
            animate={{
                y: [-20, 0],
                opacity: [0, 1]
            }}
            exit={{scale: 2}}
            key={{pathname}}
            transition={{duration: 0.2, ease: "easeOut", delay: 0.1}}
    >
    <span>Home</span>
    </motion.div>
    </AnimatePresence>
</div>