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;

Edit this page