FadeInOnScroll Component

Scroll-triggered reveal animations for content.

About FadeInOnScroll

The FadeInOnScroll component wraps content and reveals it with a smooth fade-in animation when it enters the viewport. It uses the Intersection Observer API for optimal performance.

Basic Usage

Wrap any content you want to animate:

<FadeInOnScroll>
  <div class="card">
    <h2>Card Title</h2>
    <p>This content fades in when scrolled into view.</p>
  </div>
</FadeInOnScroll>

Staggered Animations

Add delays to create staggered reveal effects:

<FadeInOnScroll delay={0}>
  <div class="card">First card</div>
</FadeInOnScroll>

<FadeInOnScroll delay={100}>
  <div class="card">Second card (100ms delay)</div>
</FadeInOnScroll>

<FadeInOnScroll delay={200}>
  <div class="card">Third card (200ms delay)</div>
</FadeInOnScroll>

Props

  • delay - Delay in milliseconds before animation starts (default: 0)

Animation Properties

  • Duration - 0.6s transition time
  • Easing - Smooth ease-out curve
  • Transform - 20px upward translate
  • Opacity - 0 to 1 fade effect
  • Threshold - Triggers at 10% visibility

How It Works

The component uses the Intersection Observer API to detect when elements enter the viewport. When an element becomes visible, a CSS class is added that triggers the animation. This approach is much more performant than scroll event listeners.