Framer Motion

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;