슬라이드 애니메이션

방향성 있는 슬라이드 애니메이션

슬라이드 애니메이션

슬라이드(Slide) 애니메이션은 요소를 특정 방향으로 밀어내거나 끌어오는 효과를 만듭니다.

사용법

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

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

옵션

interface SlideOptions {
  direction?: 'left' | 'right' | 'up' | 'down';  // 슬라이드 방향 (기본값: 'left')
  distance?: number;      // 이동 거리 (기본값: 100)
  opacity?: boolean;      // 투명도 효과 포함 여부 (기본값: true)
  spring?: {
    stiffness?: number;   // 스프링 강도 (기본값: 300)
    damping?: number;     // 감쇠 계수 (기본값: 30)
  };
}

사용 예시

// 오른쪽으로 슬라이드
slide({ direction: 'right' })

// 위로 슬라이드
slide({ direction: 'up' })

// 긴 거리 슬라이드
slide({ distance: 200 })

// 슬라이드만 (투명도 변화 없음)
slide({ opacity: false })