바운스 애니메이션

튀는 듯한 경쾌한 애니메이션

바운스 애니메이션

바운스(Bounce) 애니메이션은 요소가 통통 튀는 듯한 생동감 있는 효과를 만듭니다.

사용법

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

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

옵션

interface BounceOptions {
  times?: number;       // 바운스 횟수 (기본값: 2)
  scale?: number;       // 바운스 시 크기 변화 (기본값: 1.2)
  opacity?: boolean;    // 투명도 효과 포함 여부 (기본값: true)
  spring?: {
    stiffness?: number; // 스프링 강도 (기본값: 500)
    damping?: number;   // 감쇠 계수 (기본값: 15)
  };
}

사용 예시

// 여러 번 바운스
bounce({ times: 3 })

// 큰 바운스
bounce({ scale: 1.5 })

// 바운스만 (투명도 변화 없음)
bounce({ opacity: false })

// 부드러운 바운스
bounce({ spring: { stiffness: 300, damping: 20 } })