[React] 요소 나타날 때 통통 튀는 애니메이션 효과 주기

안녕하세요, hr0513입니다! 🥰

 

React에서 IntersectionObserver를 사용하여 요소가 화면에 보일 때 애니메이션을 실행하는 두 가지 방법을 소개하려고 합니다.

 

IntersectionObserver는 특정 요소가 viewport 내에 들어왔을 때,

또는 화면에서 벗어날 때 이를 감지하여 애니메이션 효과 작업을 수행할 때 사용할 수 있어요.

---

1. 애니메이션을 한 번만 실행하는 코드

import React, { useEffect, useRef, useState } from 'react';
import styles from '../styles/ProjectCard.module.scss';

const ProjectCard = ({ title }) => {
  const [isVisible, setIsVisible] = useState(false);
  const cardRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(entry.target); // 한 번만 애니메이션 실행
        }
      },
      { threshold: 0.5 } // 50%가 화면에 보일 때 애니메이션 시작
    );

    if (cardRef.current) observer.observe(cardRef.current);

    return () => observer.disconnect();
  }, []);

  return (
    <div
      className={`${styles.projectCard} ${isVisible ? styles.visible : ''}`}
      ref={cardRef}
    >
    </div>
  );
};

export default ProjectCard;

 

요소가 화면 50% 이상 보일 때 isVisible 상태를 true로 바꿔주며,

oberserver.unobserve(entry.target)을 통해 요소가 더 이상 감지되지 않게 설정합니다.

이렇게 하면 애니메이션이 한 번만 실행돼요.

---

2. 애니메이션을 계속 실행하는 코드

import React, { useEffect, useRef, useState } from 'react';
import styles from '../styles/ProjectCard.module.scss';

const ProjectCard = ({ title }) => {
  const [isVisible, setIsVisible] = useState(false);
  const cardRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        // 요소가 보이면 isVisible을 true로, 보이지 않으면 false로 설정
        setIsVisible(entry.isIntersecting);
      },
      { threshold: 0.5 } // 50%가 화면에 보일 때 애니메이션 시작
    );

    if (cardRef.current) observer.observe(cardRef.current);

    return () => observer.disconnect();
  }, []);

  return (
    <div
      className={`${styles.projectCard} ${isVisible ? styles.visible : ''}`}
      ref={cardRef}
    >
    </div>
  );
};

export default ProjectCard;

 

요소가 보일 때마다 isVisible 값을 true로 설정하고,

다시 화면에서 벗어나면 false로 설정합니다.

이렇게 하면 요소가 뷰포트에 들어오거나 나갈 때마다 애니메이션이 반복 실행돼요.

---

SCSS 코드

.projectCard {
  width: 100px;
  height: 100px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0;
  transform: translateY(30%);
  transition: transform .8s cubic-bezier(.25, .1, .25, 1.25), opacity 1s ease;

  &:nth-child(2n) {
    background-color: #50AF95;
  }

  &:nth-child(2n + 1) {
    background-color: #2975C9;
  }
}

.visible {
  opacity: 1;
  transform: translateY(0);
}

---

실행화면

---

IntersectionObserver를 사용하면 이렇게 요소가 화면에 보일 때마다 애니메이션을 제어할 수 있어요.

여러분도 웹사이트에 추가해보고 생동감 넘치는 포트폴리오 만들길 바랄게요! ✨