Dan Stroot Headshot

Framer Motion

1 min read

Published

1

Install Framer Motion 

  
  
       
  
  # 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 

  
  
       
  
  import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
3

Use AnimatePresence with LazyMotion 

  
  
       
  
  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