1
Install Framer Motion
Terminal
# If you're using npm
npm install framer-motion
# If you're using yarn
yarn add framer-motion
2
Reduce bundle size by using LazyMotion
index.js
import { m, LazyMotion, domAnimation, AnimatePresence } from "framer-motion";
3
Use AnimatePresence with LazyMotion
index.js
import { m, LazyMotion, domAnimation, AnimatePresence } from "framer-motion";
const Home = () => {
return (
<LazyMotion features={domAnimation}>
<Container>
<AnimatePresence>
{/* Animated Left Pane */}
<m.div
key="left-pane"
initial={{ x: -500 }}
animate={{ x: 0 }}
exit={{ x: -500 }}
className="hidden justify-center w-1/4 h-full bg-gray-800 rounded-3xl max-h-100 lg:flex"
>
// Custom component
</m.div>
</AnimatePresence>
</Container>
</LazyMotion>
);
};
export default Home;