Animations

FadeInOnScroll

The FadeInOnScroll component reveals content as users scroll down the page. It uses the Intersection Observer API for optimal performance.

Basic Usage

Wrap any content you want to animate:

<FadeInOnScroll>
  <h2>This content fades in on scroll</h2>
</FadeInOnScroll>

Staggered Animations

Add delays for staggered reveal effects:

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

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

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

View Transitions

Astro's View Transitions API enables smooth page transitions. Enable it in your configuration:

// src/config/site.ts
export const siteConfig = {
  features: {
    viewTransitions: true,
  },
}

Elements will smoothly transition between pages, creating a native app-like experience.

Animation Properties

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