Bounce Animation

Create lively and playful animations

Bounce Animation

The Bounce animation creates a lively bouncing effect that adds playfulness to elements.

Usage

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

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

Options

interface BounceOptions {
  times?: number;       // Bounce count (default: 2)
  scale?: number;       // Scale on bounce (default: 1.2)
  opacity?: boolean;    // Include opacity effect (default: true)
  spring?: {
    stiffness?: number; // Spring stiffness (default: 500)
    damping?: number;   // Damping coefficient (default: 15)
  };
}

Usage Examples

// Multiple bounces
bounce({ times: 3 })

// Larger bounce
bounce({ scale: 1.5 })

// Bounce only (no opacity)
bounce({ opacity: false })

// Soft bounce
bounce({ spring: { stiffness: 300, damping: 20 } })