웹 페이지를 구현하다 보면 단순히 콘텐츠를 보여주는 것보다 부드러운 등장 애니메이션을 적용하는 것만으로도 사용자 경험이 크게 향상된다.
React에서는 CSS만으로도 애니메이션을 구현할 수 있지만, 요소가 화면에 나타날 때 자연스럽게 Fade In 되거나 Scroll에 맞춰 등장하는 효과를 구현하려면 코드가 다소 복잡해질 수 있다.
이번 글에서는 React Awesome Reveal 라이브러리를 사용하여 간단하게 애니메이션을 적용하는 방법을 정리해 보았다.
React Awesome Reveal이란?
React Awesome Reveal은 CSS Animation과 Intersection Observer를 활용하여 요소가 화면에 나타나는 시점에 다양한 애니메이션을 쉽게 적용할 수 있는 라이브러리이다.
대표적으로 다음과 같은 효과를 제공한다.
- Fade
- Slide
- Zoom
- Rotate
- Bounce
별도의 CSS 애니메이션을 직접 작성하지 않아도 컴포넌트를 감싸는 것만으로 적용할 수 있다는 장점이 있다.
라이브러리 설치
먼저 라이브러리를 설치한다.
npm install react-awesome-reveal @emotion/react@emotion/react는 내부적으로 사용하는 의존성이므로 함께 설치해야 한다.
기본 사용 방법
애니메이션을 적용할 컴포넌트를 Fade로 감싸주기만 하면 된다.
import { Fade } from 'react-awesome-reveal';
function DescriptionSection() {
return (
<Fade duration={2000}>
<div>
...
</div>
</Fade>
);
}
export default DescriptionSection;위 예제에서는 컴포넌트가 2초 동안 자연스럽게 나타나는(Fade In) 애니메이션이 적용된다.
자주 사용하는 옵션
Fade 컴포넌트는 다양한 옵션을 제공한다.
| 속성 | 설명 |
|---|---|
duration | 애니메이션 지속 시간(ms) |
delay | 애니메이션 시작 지연 시간 |
direction | 등장 방향 (up, down, left, right) |
triggerOnce | 한 번만 실행 여부 |
cascade | 자식 요소를 순차적으로 애니메이션 적용 |
damping | cascade 적용 시 간격 조절 |
예를 들어 아래와 같이 사용할 수 있다.
<Fade
direction="up"
duration={1000}
triggerOnce
>
<Section />
</Fade>활용 예시
React Awesome Reveal은 다음과 같은 화면에서 자주 활용된다.
- 메인 페이지 Hero Section
- 서비스 소개 영역
- 카드 리스트
- 프로젝트 소개
- 스크롤 기반 랜딩 페이지
특히 스크롤하면서 콘텐츠가 자연스럽게 등장하는 효과를 구현할 때 많이 사용된다.
결과
React Awesome Reveal을 사용하면 복잡한 CSS 애니메이션을 직접 작성하지 않아도, 컴포넌트를 감싸는 것만으로 다양한 등장 효과를 쉽게 적용할 수 있다.
또한 애니메이션 시간, 방향, 실행 조건 등을 컴포넌트의 속성으로 제어할 수 있어 유지보수도 비교적 간편한 편이다.
아래는 실제 프로젝트에 적용한 애니메이션 화면이다.
Reference
