🎭 Advanced Animation Types - Complete Collection

17 route transitions + 23+ element animations = Ultimate flexibility!

🚀 New Route Animations (Just Added)

3D Animations

Organic Animations

Dramatic Animations

🎨 New Element Animations (Just Added)

Shape-Morphing Animations

'morph'      // 🔮 Shape-shifting transformation
'scatter'    // ✨ Particle-like scattered appearance
'magnetize'  // 🧲 Magnetic attraction effect
'unfold'     // 📄 Paper unfolding reveal

Text Animations

'typewriter' // ⌨️ Text typing animation
'spotlight'  // 💡 Dramatic spotlight reveal

Floating Animations

'float'      // ☁️ Gentle floating motion (perfect for attention)

📊 Complete Animation Catalog

Route Transitions (17 types)

// Classic
'elegant'    // Polished, subtle (default)
'fade'       // Simple opacity
'slideUp'    // Rise from below
'slideDown'  // Descend from above
'slideLeft'  // Forward navigation
'slideRight' // Back navigation
'scale'      // Basic zoom
'bounce'     // Spring entrance
'zoom'       // Dramatic zoom

// 3D Effects (NEW!)
'flip'       // Vertical 3D flip
'rotateX'    // Horizontal 3D flip
'cube'       // Complex 3D rotation

// Organic Effects (NEW!)
'wave'       // Skew + blur wave
'ripple'     // Circular expansion
'spiral'     // 720° spin

// Dramatic Effects (NEW!)
'vortex'     // Spinning + scale
'explode'    // Scale explosion

Element Animations (23+ presets)

// Entrance
'fade-in', 'slide-up', 'slide-down', 'slide-left', 'slide-right',
'scale-in', 'bounce-in'

// Exit
'fade-out', 'scale-out', 'bounce-out'

// Attention
'pulse', 'shake', 'glow', 'float' // NEW!

// Special Effects
'glassmorphism-reveal', 'shimmer-load', 'liquid-reveal'

// Advanced (NEW!)
'morph', 'scatter', 'magnetize', 'unfold', 'typewriter', 'spotlight'

🎯 Usage Examples

Route Configuration

// Try the new dramatic animations!
const routes: Routes = [
  {
    path: 'home',
    data: { animation: 'elegant' }      // Professional
  },
  {
    path: 'gallery', 
    data: { animation: 'cube' }         // 3D showcase
  },
  {
    path: 'creative',
    data: { animation: 'wave' }         // Organic feel
  },
  {
    path: 'achievements',
    data: { animation: 'explode' }      // Celebration!
  },
  {
    path: 'profile',
    data: { animation: 'flip' }         // Card reveal
  }
];

Element Usage

<!-- Shape-morphing header -->
<header flashAnim="morph" flashAnimSpeed="elegant">
  Welcome to the Future
</header>

<!-- Scattered loading -->
<div flashAnim="scatter" flashAnimSpeed="fast">
  Loading particles...
</div>

<!-- Typewriter text -->
<p flashAnimViewport="typewriter" flashAnimSpeed="slow">
  This text types out when scrolled into view
</p>

<!-- Floating CTA -->
<button flashAnim="float" 
        flashAnimRepeat="999" 
        flashAnimDirection="alternate">
  Floating Button
</button>

<!-- Spotlight reveal -->
<div flashAnimViewport="spotlight" 
     [flashAnimThreshold]="0.8">
  Important content revealed dramatically
</div>

🎮 Advanced Timing Controls (NEW!)

All Directives Now Support

<div flashAnim="slide-up"
     flashAnimSpeed="normal"          <!-- Speed preset -->
     [flashAnimDelay]="300"           <!-- Delay in ms -->
     [flashAnimDuration]="1000"       <!-- Custom duration -->
     flashAnimEasing="cubic-bezier(0.68, -0.55, 0.265, 1.55)"  <!-- Custom curve -->
     [flashAnimRepeat]="3"            <!-- Repeat 3 times -->
     flashAnimDirection="alternate"   <!-- Back and forth -->
     flashAnimFillMode="both">        <!-- Keep final state -->
  Advanced content
</div>

Timing Control Options

// Speed (shortcuts for common durations)
flashAnimSpeed: 'instant' | 'fast' | 'normal' | 'slow' | 'elegant'

// Custom timing
flashAnimDelay: number        // Delay before starting (ms)
flashAnimDuration: number     // Custom duration (ms) 
flashAnimEasing: string       // CSS easing function

// Repetition
flashAnimRepeat: number       // How many times (999 = infinite)
flashAnimDirection: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'
flashAnimFillMode: 'none' | 'forwards' | 'backwards' | 'both'

🔧 Dynamic Configuration (NEW!)

1. Component-Level Route Animation Override

<!-- Component can override its route animation -->
<my-user-component [flashRouteAnimation]="'cube'"
                  [flashRouteAnimationSpeed]="'elegant'">
  This component will use 'cube' animation instead of route default!
</my-user-component>

2. Comprehensive Configuration Object

<!-- Single config object with all options -->
<div [flashAnimConfig]="{
  preset: 'morph',
  speed: 'elegant',
  delay: 300,
  repeat: 2,
  direction: 'alternate',
  easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
}">
  Fully customized animation
</div>

🎨 Animation Combination Examples

Creative Landing Page

<!-- Hero with explosion -->
<hero-section [flashRouteAnimation]="'explode'">
  <h1 flashAnim="typewriter" flashAnimSpeed="slow">
    Welcome to the Future
  </h1>
</hero-section>

<!-- Features with morphing -->
@for (feature of features; track feature.id) {
  <feature-card flashAnimViewport="morph"
                [flashAnimDelay]="$index * 200"
                flashAnimHover="float"
                flashAnimClick="scatter">
    {{ feature.title }}
  </feature-card>
}

Premium Dashboard

<!-- 3D cube entrance -->
<dashboard-container [flashRouteAnimation]="'cube'">
  
  <!-- Spotlight reveals -->
  @for (metric of metrics; track metric.id) {
    <metric-card flashAnimViewport="spotlight"
                 [flashAnimThreshold]="0.8"
                 flashAnimHover="glow"
                 flashAnimClick="magnetize">
      {{ metric.value }}
    </metric-card>
  }
  
</dashboard-container>

Creative Portfolio

<!-- Wave entrance -->
<portfolio-page [flashRouteAnimation]="'wave'">
  
  <!-- Unfolding projects -->
  @for (project of projects; track project.id) {
    <project-card flashAnimViewport="unfold"
                  flashAnimHover="morph"
                  flashAnimClick="vortex">
      {{ project.title }}
    </project-card>
  }
  
</portfolio-page>

⚡ Performance Notes

GPU-Accelerated Properties

All animations use hardware-accelerated CSS properties:

• ✅ transform (translate, scale, rotate, skew, perspective)
• ✅ opacity
• ✅ filter (blur, brightness, contrast)
• ✅ clip-path (for iris effect)

Browser Support

🧪 How to Test

Route Animations

Try these in your route configs:

// Subtle
{ path: 'dashboard', data: { animation: 'elegant' } }

// Dramatic  
{ path: 'gallery', data: { animation: 'explode' } }

// 3D
{ path: 'profile', data: { animation: 'cube' } }

// Organic
{ path: 'creative', data: { animation: 'wave' } }

Element Animations

<!-- Test shape morphing -->
<div flashAnim="morph">Content</div>

<!-- Test particle scatter -->  
<div flashAnim="scatter">Particles</div>

<!-- Test typewriter -->
<p flashAnim="typewriter">This types out</p>

<!-- Test floating -->
<button flashAnim="float" flashAnimRepeat="999">
  Floating Button
</button>

🎯 Summary

What You Now Have

✅ 17 Route Animations - From subtle to explosive
✅ 23+ Element Animations - Every effect imaginable
✅ Advanced Timing Controls - Delay, duration, repeat, easing
✅ Dynamic @Input() Support - Components can specify animations
✅ Configuration Objects - Single-property comprehensive control
✅ Cross-Directive Consistency - All features work everywhere

Total Animation Combinations

17 Route Types
×
5 Speed Settings  
×
23+ Element Presets
×
Infinite timing variations
=
UNLIMITED ANIMATION POSSIBILITIES! 🎨✨

Status: ✅ Advanced animation library complete!

Next: Start experimenting with the new animations! Try animation: 'explode' or animation: 'cube' in your routes! 🚀