Framer-motion : useAnimate

useAnimate

컴포넌트 내의 요소들에 대해 애니메이션을 적용할 수 있는 훅이다. 이 훅은 scope와 animate 함수를 반환한다.
일반 태그 혹은 컴포넌트 하위 요소에 애니메이션을 적용하고 싶을 때 사용할 수 있다. 이를 통해 특정 요소에 애니메이션을 적용하고, 컴포넌트가 제거될 때 자동으로 정리할 수 있다.

주요기능

import { useAnimate } from 'framer-motion'
import { useEffect } from 'react'

function FadeInList({ children }) {
    const [scope1, animate1] = useAnimate()

    useEffect(() => {
        animate1('li', { opacity: 1 }, { duration: 2 })
    }, [animate1])

    return <ul ref={scope1} style={{ listStyle: 'none', padding: 0 }}>{children}</ul>
}

export default function Comp31() {
    const listStyle = {
        opacity: 0, margin: "10px 0", backgroundColor: '#f0f0f0',
        padding: "10px", borderRadius: '5px'
    }

    return (
        <div style={{ textAlign: "center" }}>
            <h1>Fade In List</h1>
            <FadeInList>
                <li
                    style={listStyle}>
                    Item1
                </li>
                <li
                    style={listStyle}>
                    Item2
                </li>
                <li
                    style={listStyle}>
                    Item3
                </li>
            </FadeInList>
        </div>
    )
}

const [scope1, animate1] = useAnimate()

scope1 : 애니메이션을 적용할 요소를 참조하는 ref
animate1 : 애니메이션을 적용하는 함수

animate1('li', { opacity: 1 }, { duration: 2 })
첫 번째 인자로 선택자를 받고 두 번째 인자로 애니메이션 속성을 받는다. 여기서 선택자는 scope를 받은 요소의 자식 요소만 선택한다.