React 카드 인터랙션 애니메이션 라이브러리

📒 React 카드 인터랙션 애니메이션 라이브러리

• NPM
• Github

카드 뷰에 인터랙션 애니메이션을 적용하는 라이브러리를 하나 만들어 봤습니다.

https://www.youtube.com/watch?v=YDCCauu4lIk

예전에 본 코딩 애플님의 영상을 기억에 담아뒀다 심심했던 차에 리액트 패키지로 재구성했습니다.

📌 라이브러리 정보

🔎 install

$ npm i @lasbe/react-card-animation

🔎 example

import { CardAnimation } from '@lasbe/react-card-animation';

export default function App() {
  return (
    <div>
      <CardAnimation>
        <div className={`w-[300px] h-[200px]`}>...</div>
      </CardAnimation>
      <CardAnimation angle={10}>
        <div className={`w-[300px] h-[200px]`}>...</div>
      </CardAnimation>
    </div>
  );
}

적용할 컨테이너 바깥에 CardAnimation을 감아줍니다.

🔎 Props

📌 코드

'use client';

import React, { useCallback, useEffect, useRef, useState } from 'react';
import './react-card-animation.css';

type CardAnimationType = {
  children: React.ReactElement;
  angle?: number;
};

type MousePositionType = {
  x: null | number;
  y: null | number;
};

export const CardAnimation = ({ children, angle = 30 }: CardAnimationType) => {
  const [mousePosition, setMousePosition] = useState<MousePositionType>({
    x: null,
    y: null,
  });
  const [isInMouse, setIsInMouse] = useState(false);
  const mousePositionRef = useRef<MousePositionType>({ x: null, y: null });
  const requestRef = useRef<number | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const handleMouseMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      const containerWidth = containerRef?.current?.offsetWidth;
      const containerHeight = containerRef?.current?.offsetHeight;

      const mouseX = e.nativeEvent.offsetX; // 마우스 X 좌표
      const mouseY = e.nativeEvent.offsetY; // 마우스 Y 좌표

      document.body?.style.setProperty('--card-animation-lighting-x', `${mouseX}px`);
      document.body?.style.setProperty('--card-animation-lighting-y', `${mouseY}px`);

      const xRatio = mouseX / (containerWidth ?? 1);
      const yRatio = mouseY / (containerHeight ?? 1);

      const ratio = angle;

      const xValue = ratio - xRatio * (ratio * 2);
      const yValue = ratio - yRatio * (ratio * 2);

      mousePositionRef.current = { x: -yValue, y: xValue };
      setIsInMouse(true);
    },
    [angle],
  );

  const handleMouseOut = useCallback(() => {
    setTimeout(() => {
      setIsInMouse(false);
    }, 500);
  }, []);

  const loop = useCallback(() => {
    setMousePosition(mousePositionRef.current);
    requestRef.current = requestAnimationFrame(loop);
  }, []);

  useEffect(() => {
    requestRef.current = requestAnimationFrame(loop);
    return () => {
      cancelAnimationFrame(requestRef.current ?? 0);
      document.body.style.removeProperty('--card-animation-lighting-x');
      document.body.style.removeProperty('--card-animation-lighting-y');
    };
  }, [loop]);

  return React.cloneElement(children, {
    ref: containerRef,
    onMouseMove: handleMouseMove,
    onMouseOut: handleMouseOut,
    style: {
      ...children.props.style,
      transform: `perspective(800px) rotateX(${isInMouse ? mousePosition.x : 0}deg) rotateY(${isInMouse ? mousePosition.y : 0}deg)`,
    },
    className: `${children.props.className ?? ''} card-animation`,
  });
};

.card-animation {
  transition: 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99);
  transform-style: preserve-3d;
}

.card-animation::after,
.card-animation::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: 1;
  transition: opacity 0.25s;
}

.card-animation::before {
  background: radial-gradient(800px circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 40%);
}

.card-animation:hover::before {
  opacity: 0;
}

.card-animation::after {
  opacity: 0;
  background: radial-gradient(
    500px circle at var(--card-animation-lighting-x) var(--card-animation-lighting-y),
    rgba(255, 255, 255, 0.4),
    transparent 40%
  );
}

.card-animation:hover::after {
  opacity: 1;
}

🔎 최적화

onMouseMove 이벤트로 인한 잦은 상태 변화를 줄이기 위해 requestAnimationFrame를 사용했습니다.

프레임을 주사율에 맞춰 콜백을 호출하기에 부드러운 애니메이션 효과와 효율을 함께 챙길 수 있었습니다.

🔎 광원효과

위 유튜브 영상과는 다르게 카드 뷰에 이미지를 적용하지 않고 색상을 넣을 용도로 만들었기 때문에 css의 filter 옵션을 사용하기에 다음과 같은 제약이 있었습니다.

• 카드 레이어를 상단, 광원 효과를 하단 레이어로 배치
  카드 레이어에 배경 색을 적용할 경우 광원 효과가 보이지 않음
• 카드 레이어를 하단, 광원 효과를 상단 레이어로 배치
  • 배경에 광원 효과가 합성됨
  • 마우스 좌표 값에 따른 움직임 차이가 심해짐
  • React.cloneElement 사용에 제약이 생김

그래서 body에 css 전역 값(var(--card-animation-lighting-x))을 계속해서 수정하고 가상 선택자를 통해 그래디언트의 위치를 변경하는 방식으로 표현하게 되었습니다.