Fade Animation

Smooth fade in/out animation for elements

Fade Animation

The Fade animation adjusts the opacity of elements to create smooth appearing and disappearing effects.

Usage

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

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

Options

interface FadeOptions {
  from?: number;    // Starting opacity (default: 0)
  to?: number;      // Ending opacity (default: 1)
  spring?: {
    stiffness?: number;  // Spring stiffness (default: 300)
    damping?: number;    // Damping ratio (default: 30)
  };
}

Examples

// Partial fade
fade({ from: 0.2, to: 0.8 })

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

// Smooth fade
fade({ spring: { stiffness: 100, damping: 20 } })