Scale Animation

Scale animation that adjusts element size

Scale Animation

The Scale animation enlarges or shrinks elements to create zoom effects.

Usage

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

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

Options

interface ScaleOptions {
  from?: number;           // Starting scale (default: 0)
  to?: number;             // Ending scale (default: 1)
  axis?: 'x' | 'y' | 'both';  // Scale axis (default: 'both')
  spring?: {
    stiffness?: number;    // Spring stiffness (default: 300)
    damping?: number;      // Damping ratio (default: 30)
  };
}

Examples

// Scale X axis only
scale({ axis: 'x' })

// Scale Y axis only
scale({ axis: 'y' })

// Start from smaller size
scale({ from: 0.5, to: 1 })

// Fast scale
scale({ spring: { stiffness: 500, damping: 40 } })