Slide Animation

Create dynamic movement effects by sliding elements in specific directions

Slide Animation

The Slide animation creates effects where elements are pushed out or pulled in from a specific direction.

Usage

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

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

Options

interface SlideOptions {
  direction?: 'left' | 'right' | 'up' | 'down';  // Slide direction (default: 'left')
  distance?: number;      // Travel distance (default: 100)
  opacity?: boolean;      // Include opacity effect (default: true)
  spring?: {
    stiffness?: number;   // Spring stiffness (default: 300)
    damping?: number;     // Damping coefficient (default: 30)
  };
}

Usage Examples

// Slide right
slide({ direction: 'right' })

// Slide up
slide({ direction: 'up' })

// Long distance slide
slide({ distance: 200 })

// Slide only (no opacity change)
slide({ opacity: false })