스케일 애니메이션

요소의 크기를 조절하는 스케일 애니메이션

스케일 애니메이션

스케일(Scale) 애니메이션은 요소의 크기를 확대하거나 축소하는 효과를 만듭니다.

사용법

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

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

옵션

interface ScaleOptions {
  from?: number;           // 시작 크기 (기본값: 0)
  to?: number;             // 종료 크기 (기본값: 1)
  axis?: 'x' | 'y' | 'both';  // 스케일 축 (기본값: 'both')
  spring?: {
    stiffness?: number;    // 스프링 강도 (기본값: 300)
    damping?: number;      // 감쇠 계수 (기본값: 30)
  };
}

사용 예시

// X축만 스케일
scale({ axis: 'x' })

// Y축만 스케일
scale({ axis: 'y' })

// 작은 크기에서 시작
scale({ from: 0.5, to: 1 })

// 빠른 스케일
scale({ spring: { stiffness: 500, damping: 40 } })