Exit Animations problem in Route Transitions with framer-motion - reactjs

Question

I have been trying to animate route transitions using framer-motion but can't wrap my head around the exit animations. Entry animations work as they should.
I want the component to slide in from the left and slide to the right when route changes.
I havewrapped the Switch component using AnimatedPresence from framer-motion and used a location object and taken its pathname as its key.
Wrapped all of this using BrowserRouter
Ensured I have used motion component from framer-motion at the root element of each of my functional components
Codesandbox
App.js
function App() {
const location = useLocation();
return (
<div className="App">
<AnimateTrans loc={location} />
</div>
);
}
AnimateTrans.jsx
export default function (props) {
return (
<AnimatePresence exitBeforeEnter>
<Switch location={props.loc} key={props.loc.pathname}>
<Route exact path="/">
<First />
</Route>
<Route exact path="/sec">
<Second />
</Route>
</Switch>
</AnimatePresence>
);
}
First.jsx
const transition = {
duration: 1,
type: "spring"
};
const transVariants = {
init: { scale: 0.3, opacity: 1, x: -400, transition: { transition } },
anim: { scale: 1, opacity: 1, x: 0, transition: { transition } },
exit: { scale: 0.4, opacity: 0, x: 400, transition: { transition } }
};
return (
<motion.div
variants={transVariants}
initial="init"
animate="anim"
exit="exit"
className="container"
>
<div className="content">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1a79XgKvvi2VyAu54LI21MbKrfSlZTL9iPA&usqp=CAU" />
</div>
<div className="oth"></div>
d
</motion.div>
);
Second.jsx
const transition = {
duration: 1,
type: "spring"
};
const transVariants = {
initial: { scale: 0.3, opacity: 1, x: -400, transition: { transition } },
animate: { scale: 1, opacity: 1, x: 0, transition: { transition } },
exit1: { scale: 0.4, opacity: 0, x: 400, transition: { transition } }
};
return (
<motion.div
variants={transVariants}
initial="initial"
animate="animate"
exit="exit1"
className="container"
>
<div className="content">
<img src="https://fashioneditorials.com/wp-content/uploads/2017/10/i-D-Japan-Chanel-Haute-Couture-With-Nana-Komatsu-Angelo-Pennetta-1.jpg" />
</div>
<div className="oth"></div>
d
</motion.div>
);
}
Is my location object at fault here? Should I change the key or structure App.js differently?

Answer 1

You are using the <a> tag to route, you need to use Link from react-router-dom. Then It's gonna work.