React 에서 애니메이션, 인터렉션 구축하기 (emotion / tweenmax)

1. emotion keyframes 사용하기

참조사이트

https://www.npmjs.com/package/@emotion/react

https://emotion.sh/docs/keyframes

 

emotion/react 에서는 keyframes를 통하여 기존 CSS에서 사용하였던 애니메이션 keyframe을 그대로 사용할 수 있습니다. 먼저 설치를 합니다. 

yarn add @emotion/react

간단한 사용법 및 런타임에러가 난다면 여기를 참조하세요.

 

아주 심플한 floating 애니메이션을 만들어 보겠습니다.

먼저 keyframes를 불러옵니다. 

floating 애니메이션을 만들고, 스타일에 넣어줍니다. 

간단한 세팅만으로 기존에 쓰던 CSS대로 사용할 수 있으니 아주 편합니다. 

또한 따로 분리해서 여기저기 import 해서 쓸 수 있으니 아주 유용하게 사용 될꺼라 생각됩니다. 

import { css, keyframes } from '@emotion/react'

function Animation1() {
    return (
        <div>
            <h2>emotion Animation</h2>
            <div className="wrap">
                <div className="box" css={boxStyle}></div>
            </div>
        </div>
    )
}

const floating = keyframes`
    0 {
        transform: translateY(0);    
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0);
    }
`

const boxStyle = css`
    width: 50px; 
    height: 50px; 
    border-radius: 100%;
    background: #a951bf;
    animation: ${floating} 2s ease infinite;
`


export default Animation1

결과

---

2. gsap 사용하기

참조사이트

https://www.npmjs.com/package/react-gsap

 

구현하다 보면 애니메이션 보다는 인터렉션이 필요할 때가 많습니다. 

gsap 공식 문서를 보니 gsap 와 react-gsap 두 가지를 설치하도록 안내되어있습니다. 

gsap는 기존 javascript에서 쓰던 방법과 크게 다른게 없었습니다. 

yarn add gsap

gsap는 from, to 키워드로 시작점과 끝점을 연결 시킬 수 있습니다. 

아니면 단독으로 to만 사용하여 기존 css에서 변형을 줄 수 있습니다. 

 

기존 gsap 동작방식은 객체에 직접 접근하여 움직임을 주기 때문에 리액트에서는 useRef를 사용하여,

구현할 수 있습니다. 

기본적으로 인터렉션은 한 번만 동작 하며, 반복을 주고 싶다면 repeat: -1 속성을 추가해 주면 됩니다. 

import gsap from 'gsap'

function Animation2() {
    const boxRef = useRef(null);
    useEffect(() => {
        gsap.to(boxRef.current, 1, {transform: 'translateX(200px)', delay: .5, ease: 'ease'})
    }, [])

    return (
        <div>
            <h2>gsap Animation</h2>
            <div className="wrap">
                <div className="box" css={boxStyle} ref={boxRef}></div>
            </div>
        </div>
    )
}

const boxStyle = css`
    width: 50px; 
    height: 50px; 
    border-radius: 100%;
    background: #bf5160;
`
export default Animation2

결과 ( 한 번만 동작 )

---

3. react-gsap 사용하기

참조사이트

https://bitworking.github.io/react-gsap/src-components-timeline

 

gsap와 react-gsap의 사용법이 꽤 많이 달라고 별개로 구분을 해보았습니다. 

이번에는 timeline을 주어 두 가지 동작을 순차적으로 불러오도록 하겠습니다. 

1. opacity 0 -> 1

2. 오른쪽으로 움직임

react-gsap는 gsap와는 달리 class 컴포넌트 형태로 움직임을 주려는 객체를 target으로 보내서 구현을 합니다. 

이후 구현하려는 모션들을 Tween에 담고 TimeLine으로 감싸주면 됩니다. 

yarn add gsap react-gsap

import { Timeline, Tween } from 'react-gsap';

function Animation3() {
    return (
        <div>
            <h2>react-gsap Animation</h2>
            <div className="wrap">
                <Timeline
                    target={<div className="box" css={boxStyle}></div>}
                >
                    <Tween from={{ opacity: 0 }} to={{opacity: 1}} duration={1} />
                    <Tween to={{ x: '200px' }} />
                </Timeline>
            </div>
        </div>
    )
}

const boxStyle = css`
    width: 50px; 
    height: 50px; 
    border-radius: 100%;
    background: #bf5160;
    opacity: 0;
`

export default Animation3

이렇게 하면 정말 쉽게 구축 할 수 있습니다.

 

결과 ( 한 번만 동작 )

공식 사이트를 보시면 stop, pause 등등 다양한 옵션이 있습니다.

여러모로 인터렉션 구현하시는 분들에게 좋은 라이브러리인 것 같습니다. 😏

 

---