StaggeredAnimation Component

Animation wrapper component that applies staggered entrance animations to child elements. Perfect for creating smooth, sequential animations across multiple elements.

Overview

The StaggeredAnimation component provides a wrapper that automatically applies staggered animations to its children. It's ideal for lists, cards, features, and any content that benefits from sequential entrance animations.

Preview

Elements animating in sequence with customizable delays and effects

Basic Usage

<template>
  <StaggeredAnimation 
    :delay="100"
    animation="fadeInUp"
    :threshold="0.3"
  >
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
  </StaggeredAnimation>
</template>

<script setup lang="ts">
import StaggeredAnimation from '@/components/StaggeredAnimation.vue'
</script>

Features

• Multiple Animation Types - Fade, slide, scale, and custom animations
• Configurable Delays - Customizable stagger timing
• Intersection Observer - Trigger animations on scroll
• Performance Optimized - Efficient animation handling
• Responsive Support - Works across all screen sizes

Component API

Props

Prop	Type	Default	Description
delay	number	100	Delay between each element (ms)
animation	string	'fadeInUp'	Animation type
threshold	number	0.1	Intersection observer threshold
duration	number	600	Animation duration (ms)
easing	string	'ease-out'	CSS easing function

Events

Event	Payload	Description
animation-start	{ index }	Emitted when animation starts
animation-complete	{ index }	Emitted when animation completes

Animation Types

Available Animations

• fadeIn - Simple fade in
• fadeInUp - Fade in with upward movement
• fadeInDown - Fade in with downward movement
• fadeInLeft - Fade in from left
• fadeInRight - Fade in from right
• scaleIn - Scale from small to normal
• slideInUp - Slide in from bottom
• slideInDown - Slide in from top

Documentation

This component documentation is currently being written. It will include:

• Complete animation library
• Custom animation creation
• Performance optimization tips
• Integration examples

Related Components

• Features - Feature showcase with animations
• BentoGrid - Grid layout with staggered effects
• Testimonials - Testimonial cards with animations