플라이 애니메이션

공중에서 날아오는 듯한 3차원 애니메이션

플라이 애니메이션

플라이(Fly) 애니메이션은 요소가 3차원 공간에서 날아오는 듯한 효과를 만듭니다.

사용법

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

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

옵션

interface FlyOptions {
  x?: number;        // X축 이동 거리 (기본값: -100)
  y?: number;        // Y축 이동 거리 (기본값: -100)
  opacity?: number;  // 시작 투명도 (기본값: 0)
  spring?: {
    stiffness?: number;  // 스프링 강도 (기본값: 300)
    damping?: number;    // 감쇠 계수 (기본값: 30)
  };
}

사용 예시

// 대각선 플라이
fly({ x: 200, y: -50 })

// 수평 플라이
fly({ x: -200, y: 0 })

// 수직 플라이
fly({ x: 0, y: -200 })

// 반투명 시작
fly({ opacity: 0.2 })