Rotate Animation

Create unique animations with rotation effects

Rotate Animation

The Rotate animation creates effects by rotating elements as they appear or disappear.

Usage

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

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

Options

interface RotateOptions {
  degrees?: number;     // Rotation angle (default: 180)
  opacity?: boolean;    // Include opacity effect (default: true)
  scale?: boolean;      // Include scale effect (default: true)
  spring?: {
    stiffness?: number; // Spring stiffness (default: 300)
    damping?: number;   // Damping coefficient (default: 30)
  };
}

Usage Examples

// Full rotation
rotate({ degrees: 360 })

// Rotation only (no opacity/scale)
rotate({ opacity: false, scale: false })

// Small rotation
rotate({ degrees: 90 })

// Reverse rotation
rotate({ degrees: -180 })