Framer Motion
Animated slide in pane component with Framer Motion
Date: 2021-10-23
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;