1
Install Framer Motion
(bash)
# If you're using npm
npm install framer-motion
# If you're using yarn
yarn add framer-motion2
Reduce bundle size by using LazyMotion
(javascript)
import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'3
Use AnimatePresence with LazyMotion
(javascript)
import { AnimatePresence, domAnimation, LazyMotion, m } 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="max-h-100 hidden h-full w-1/4 justify-center rounded-3xl bg-gray-800 lg:flex"
>
// Custom component
</m.div>
</AnimatePresence>
</Container>
</LazyMotion>
)
}
export default Home