React 애니메이션 효과 줄 때 좋은 라이브러리 모음 추천

 

랜딩페이지에서 요소들이 움직이면서 뜨거나,

모달창이 부드럽게 뜨는 등의 애니메이션을 구현할 때 사용한 좋은 라이브러리를 소개한다.

 

1. Framer-motion

<motion.div> 태그를 작성하여서 많은 애니메이션을 구현할 수 있다.

 

Production-Ready Animation Library for React | Framer Motion

공식 홈페이지에서 소개하는 삽입코드 예시 중 하나이다.

import { addPropertyControls, ControlType } from "framer"
import { motion } from "framer-motion"
import { useState, useEffect, useLayoutEffect } from "react"

// Learn more: https://www.framer.com/docs

/*
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */
export default function Test(props) {
    const { start = 3 } = props
    const [count, setCount] = useState(0)
    
    useLayoutEffect(() => {
        if (start !== count) setCount(start)
    }, [start])
    
    return (
        <motion.div
            style={{ ...containerStyle }}
            onClick={() => {
                setCount(count + 1)
            }}
        >
            {new Array(count).fill(1, 0, count).map((_, index) => {
                return <motion.div style={squareStyle}>{index}</motion.div>
            })}
        </motion.div>
    )
}

addPropertyControls(Test, {
    start: {
        title: "Start",
        type: ControlType.Number,
        defaultValue: 2,
    },
})

const containerStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
}

const squareStyle = {
    margin: 10,
    padding: 50,
    color: "white",
    fontWeight: 600,
    borderRadius: 25,
    backgroundColor: "#09F",
    width: "max-content",
    whiteSpace: "pre-wrap",
    flexShrink: 0,
}
import { addPropertyControls, ControlType } from "framer"
import { motion } from "framer-motion"
import { useState, useEffect, useLayoutEffect } from "react"

// Learn more: https://www.framer.com/docs

/*
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */
export default function Test(props) {
    const { start = 3 } = props
    const [count, setCount] = useState(0)
    
    useLayoutEffect(() => {
        if (start !== count) setCount(start)
    }, [start])
    
    return (
        <motion.div
            style={{ ...containerStyle }}
            onClick={() => {
                setCount(count + 1)
            }}
        >
            {new Array(count).fill(1, 0, count).map((_, index) => {
                return <motion.div style={squareStyle}>{index}</motion.div>
            })}
        </motion.div>
    )
}

addPropertyControls(Test, {
    start: {
        title: "Start",
        type: ControlType.Number,
        defaultValue: 2,
    },
})

const containerStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
}

const squareStyle = {
    margin: 10,
    padding: 50,
    color: "white",
    fontWeight: 600,
    borderRadius: 25,
    backgroundColor: "#09F",
    width: "max-content",
    whiteSpace: "pre-wrap",
    flexShrink: 0,
}
#Height/Width Values

 

2. React-transition-group

weekly download 수가 1000만이 넘어갈 만큼 많은 개발자들이 사용하는 라이브러리이다.

아래의 npm 사이트에서 다운받아서 사용한다.

 

https://www.npmjs.com/package/react-transition-group

react-transition-group

 

 

코드예시는 아래와 같다.

import { SwitchTransition, CSSTransition } from "react-transition-group";

import React, { useState, useRef, useCallback } from 'react';
import First from './First';
import Second from './Second';
import Third from './Third';
import styled from 'styled-components';
import Router from 'next/router';
import { Toaster } from 'react-hot-toast';
import { updateFirstMake } from 'firebaseConfig';
const Container = styled.section`
    `

const index = () => {
  const [stage, setStage] = useState(1);
  const helloRef = React.useRef(null);
  const goodbyeRef = React.useRef(null);
  const nodeRef = stage == 1 ? helloRef : goodbyeRef;
  const goNextStage = useCallback(() => {
    setStage(prev => prev + 1);
  }, [])
  const goNextStageFirst = useCallback(async () => {
    try {
      await updateFirstMake(false);
      setStage(prev => prev + 1);
    } catch (e) {
      console.error(e);
    }
  }, [])
  const goPrevStage = useCallback(() => {
    setStage(prev => prev - 1);
  }, [])
  const goCertStage = useCallback((stage) => {
    setStage(stage);
  }, [])
  const goDashboard = useCallback(() => {
    Router.push("/dashboard");
  }, [])
  const goProfile = useCallback(() => {
    Router.push("/profile");
  }, [])
  const goFriends = useCallback(() => {
    Router.push("/friends");
  }, []);
  const goNews = useCallback(() => {
    Router.push("/news");
  }, [])

  return (
    <>
      <div className='w-full min-h-[100vh]'>
        <div className='flex flex-row w-full'>
          <div className='main w-full'>
            <SwitchTransition mode='out-in'>
              <CSSTransition
                key={stage}
                nodeRef={nodeRef}
                addEndListener={(done) => {
                  nodeRef.current.addEventListener("transitionend", done, false);
                }}
                classNames="fade"
              >
                <Container ref={nodeRef} className="button-container">
                  <div>
                    {stage === 1 ?
                      <First
                        goNextStageFirst={goNextStageFirst}
                        goNews={goNews}
                      /> :
                      stage === 2 ?
                        <Second
                          goNextStage={goNextStage}
                          goNews={goNews}
                          goPrevStage={goPrevStage}
                          goCertStage={goCertStage}
                        /> :
                        stage === 3 ?
                          <Third
                            goNextStage={goNextStage}
                            goNews={goNews}
                            goPrevStage={goPrevStage}
                            goCertStage={goCertStage}
                          /> :
                         
                                              null
                    }
                  </div>
                </Container>
              </CSSTransition>
            </SwitchTransition>
          </div>
        </div>
      </div>
      <Toaster />
    </>
  );
};

export default index;

 

뭐 대충 이런식으로

onboarding페이지에서 데이터 입력시 화면이 넘어가는 효과를 구현할 때 활용했다.

막상 입력하는 코드가 많이 없지만 효과는 처음 썼을때 굉장히 신기하다.

 

 

 

 

3. Aos

스크롤을 내릴 때 보여지는 애니메이션 효과이다.

요즘은 랜딩페이지에서 스크롤 효과를 많이 활용해서

사용자에게 시각적인 즐거움을 주곤 한다.

아래 사이트를 보면 아예 scroll시 애니메이션을 구현하는 전용 라이브러리이며,

사용하기도 굉장히 쉬운 것을 알 수 있다.

 

https://michalsnik.github.io/aos/

AOS - Animate on scroll library

 

공식문서 하단에 설치 방법이 나와있다.

코드 사용도 어렵지 않으니 잘 활용해서 사용하면 될 것 같다.

<div data-aos="fade-up"
     data-aos-anchor-placement="center-center">
</div>