페이드 애니메이션

부드러운 페이드 인/아웃 효과로 요소를 애니메이션합니다

페이드 애니메이션

페이드(Fade) 애니메이션은 요소의 투명도를 조절하여 부드럽게 나타나거나 사라지는 효과를 만듭니다.

사용법

import { transition } from '@ssgoi/react';
import { fade } from '@ssgoi/react/transitions';

function Component() {
  return (
    <div ref={transition({
      key: 'my-element',
      ...fade()
    })}>
      Fade me!
    </div>
  );
}

옵션

interface FadeOptions {
  from?: number;    // 시작 투명도 (기본값: 0)
  to?: number;      // 종료 투명도 (기본값: 1)
  spring?: {
    stiffness?: number;  // 스프링 강도 (기본값: 300)
    damping?: number;    // 감쇠 계수 (기본값: 30)
  };
}

사용 예시

// 부분 페이드
fade({ from: 0.2, to: 0.8 })

// 빠른 페이드
fade({ spring: { stiffness: 500, damping: 40 } })

// 부드러운 페이드
fade({ spring: { stiffness: 100, damping: 20 } })