summaryrefslogtreecommitdiff
path: root/src/core/components/layouts/AnimationLayout.jsx
blob: c4dee6063cc0403da210bc634717fd65f5421364 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { motion } from 'framer-motion'

const AnimationLayout = ({ children, ...props }) => {
  const transition = {
    ease: 'easeIn',
    duration: 0.2
  }

  return (
    children && (
      <motion.main
        initial={{ opacity: 0, x: 0, y: 0 }}
        animate={{ opacity: 1, x: 0, y: 0 }}
        exit={{ opacity: 0, x: 30, y: 0 }}
        transition={transition}
        {...props}
      >
        {children}
      </motion.main>
    )
  )
}

export default AnimationLayout