Dan Stroot

Framer Motion

Animated slide in pane component with Framer Motion

Date:


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

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

Use AnimatePresence with LazyMotion

index.js
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

Sharing is Caring

Edit this page