src/core/components/layouts/AnimationLayout.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import useDevice from '@/core/hooks/useDevice'
import { motion } from 'framer-motion'

const AnimationLayout = ({ children, ...props }) => {
  const { isMobile } = useDevice()

  const initialConfig = {
    opacity: 0,
    x: 0,
    y: 0
  }

  const animateConfig = {
    opacity: 1,
    x: 0,
    y: 0,
    transition: { duration: 0.2, delay: 0.2, ease: 'easeInOut' }
  }

  const exitConfig = {
    opacity: 0,
    x: isMobile ? 30 : 0,
    y: 0,
    transition: { duration: 0.2, ease: 'easeInOut' }
  }

  return (
    children && (
      <motion.main initial={initialConfig} animate={animateConfig} exit={exitConfig} {...props}>
        {children}
      </motion.main>
    )
  )
}

export default AnimationLayout