[NEXTJS]framer motion 에니메이션

1. framer motion을 이용해서 에니메이션 만들기

// SLIDE LEFT
"use client"
import React from 'react'
import { motion } from "framer-motion"

const SlideLeft = ({ children, id }) => {
    const slideLeftVariants = {
        offscreen: {
            x: -80,
            opacity:0
        },
        onscreen: {
            x: 0,
            opacity:1,
            transition: {
                // type: "spring",
                // bounce: 0.4,
                duration: 0.8
            }
        }
    };
    return (
        <motion.div
            variants={slideLeftVariants}
            initial="offscreen"
            whileInView="onscreen"
            viewport={{ once: true, amount: 0.1 }}
            className="w-full h-full justify-center items-center"

        >
            {children}
        </motion.div>
    )
}

export default SlideLeft

//SLIDE RIGHT
"use client"
import React from 'react'
import { motion } from "framer-motion"

const SlideRight = ({ children, id = 1 }) => {
    const slideRightVariants = {
        offscreen: {
            x: 80,
            opacity:0
        },
        onscreen: {
            x: 0,
            opacity:1,
            transition: {
                // type: "spring",
                // bounce: 0.4,
                duration: 0.8,
                delay: (id === 1 ? 0 : 0.1 * id)
            }
        }
    };
    return (
        <motion.div
            variants={slideRightVariants}
            initial="offscreen"
            whileInView="onscreen"
            viewport={{ once: true, amount: 0.1 }}
            className="w-full h-full justify-center items-center"

        >
            {children}
        </motion.div>
    )
}

export default SlideRight

//SLIDE UP
"use client"
import React from 'react'
import { motion } from "framer-motion"

const SlideUp = ({ children, id = 1 }) => {
    const slideLeftVariants = {
        offscreen: {
            y: 80,
            opacity: 0
        },
        onscreen: {
            y: 0,
            opacity: 1,
            transition: {
                // type: "spring",
                // bounce: 0.4,
                duration: 0.8,
                delay: (id === 1 ? 0 : 0.1 * id)
            }
        }
    };
    return (
        <motion.div
            variants={slideLeftVariants}
            initial="offscreen"
            whileInView="onscreen"
            viewport={{ once: true, amount: 0 }}
            className="w-full h-full justify-center items-center"

        >
            {children}
        </motion.div>
    )
}

export default SlideUp

//SLIDE DOWN

"use client"
import React from 'react'
import { motion } from "framer-motion"

const SlideDown = ({ children, id }) => {
    const slideDownVariants = {
        offscreen: {
            y: -80,
            opacity: 0
        },
        onscreen: {
            y: 0,
            opacity: 1,
            transition: {
                // type: "spring",
                // bounce: 0.4,
                duration: 0.8,
                delay: (0.2 * id)
            }
        }
    };
    return (
        <motion.div
            variants={slideDownVariants}
            initial="offscreen"
            whileInView="onscreen"
            viewport={{ once: true, amount: 0 }}
            className="w-full h-full justify-center items-center"

        >
            {children}
        </motion.div>
    )
}

export default SlideDown