🎨 Flash Animations - Quick Reference

Fast lookup for all flash-animations features

🚀 Quick Start

1. Route Animations (Automatic)

Just add animation type to route config:

{
  path: 'my-route',
  data: {
    animation: 'slideUp'  // Choose from available types
  }
}

That's it! The hybrid system handles the rest.

2. Element Animations (Directives)

<!-- Basic -->
<div flashAnim="fade-in" faSpeed="fast">Content</div>

<!-- Click -->
<button flashAnimClick="bounce-in">Click me!</button>

<!-- Hover -->
<div flashAnimHover="glow" flashAnimExit="fade-out">Hover me</div>

<!-- Scroll -->
<div flashAnimViewport="slide-up" [flashAnimThreshold]="0.5">Scroll to reveal</div>

3. Programmatic (TypeScript)

import { flashAnimate, flashSuccess } from '@widgets-editor/flash-animations';

// Simple animation
await flashAnimate(this.element, 'fade-in', 'fast');

// Feedback
flashSuccess(this.element, 'Saved!');
flashError(this.element, 'Failed!');

🎭 Route Animation Types

⚡ Speed Settings

🎯 Element Animation Presets

Entrance

• fade-in - Smooth opacity
• slide-up - From bottom
• slide-down - From top
• slide-left - From right
• slide-right - From left
• scale-in - Grow
• bounce-in - Spring entrance

Exit

• fade-out - Fade away
• scale-out - Shrink
• bounce-out - Spring exit

Attention

• pulse - Rhythmic pulse
• shake - Alert shake
• glow - Highlight effect

Special

• glassmorphism-reveal - Glass effect
• shimmer-load - Loading shimmer
• liquid-reveal - Fluid morph

📦 Imports

For Route Animations

import { RouteAnimationHostComponent } from '@widgets-editor/flash-animations';

// In component:
imports: [RouteAnimationHostComponent]

// In template:
<flash-route-animation-host></flash-route-animation-host>

For Element Animations

import {
  FlashAnimateDirective,
  FlashAnimateInteractionDirective,
  FlashAnimateViewportDirective
} from '@widgets-editor/flash-animations';

imports: [
  FlashAnimateDirective,
  FlashAnimateInteractionDirective,
  FlashAnimateViewportDirective
]

For Programmatic Control

import {
  FlashAnimationController,
  flashAnimate,
  flashSuccess,
  flashError,
  flashPulse,
  createAnimationChain
} from '@widgets-editor/flash-animations';

🎮 Directive Reference

flashAnim - Basic Animations

<div 
  [flashAnim]="preset"
  [faSpeed]="speed"
  [faDelay]="100"
  [faDuration]="600"
  [faEnabled]="true"
  [faTrigger]="counter">
</div>

flashAnimClick/Hover/Focus - Interactive

<button
  flashAnimClick="bounce-in"
  flashAnimHover="pulse"
  flashAnimFocus="glow"
  [faSpeed]="'fast'"
  [faEnabled]="true">
</button>

flashAnimViewport - Scroll Triggered

<div
  flashAnimViewport="slide-up"
  [flashAnimThreshold]="0.5"
  [faTriggerOnce]="true"
  [faSpeed]="'normal'"
  (faEnter)="onEnter()"
  (faExit)="onExit()">
</div>

💻 Helper Functions

// Basic
flashAnimate(element, 'fade-in', 'fast')

// Feedback
flashSuccess(element, 'Operation complete!')
flashError(element, 'Something went wrong')
flashWarning(element, 'Please review')
flashInfo(element, 'Helpful tip')

// Attention
flashPulse(element, 2)  // Pulse twice
flashShake(element, 'strong')  // Strong shake
flashGlow(element, '#22c55e', 800)  // Green glow

// Special
flashRipple(element, x, y)  // Material ripple
flashReveal(element, 'glass')  // Glassmorphism
flashEnter(element, 'up', 'normal')  // Smart entrance
flashExit(element, 'fade', 'fast')  // Smart exit

// Loading
const stop = flashStartLoading(element, 'Loading...');
// ... do work ...
stop();  // Stop loading animation

🔧 Advanced: Animation Controller

export class MyComponent {
  private controller = inject(FlashAnimationController);
  @ViewChild('element') element!: ElementRef;

  // Single animation
  async animate() {
    await this.controller.animate(this.element, 'bounce-in', {
      speed: 'fast',
      delay: 300,
      onComplete: () => console.log('Done!')
    });
  }

  // Sequence
  async sequence() {
    await this.controller.sequence(this.element, [
      { preset: 'fade-in', speed: 'fast' },
      { preset: 'glow', duration: 800, delay: 200 },
      { preset: 'pulse', speed: 'normal' }
    ]);
  }

  // Stagger (multiple elements)
  async stagger() {
    await this.controller.stagger(
      [this.card1, this.card2, this.card3],
      'slide-up',
      { speed: 'fast', staggerDelay: 150 }
    );
  }

  // Chain (fluent API)
  async chain() {
    const animation = this.controller.createChain(this.element)
      .fadeIn('fast')
      .wait(300)
      .pulse(2)
      .glow(1000)
      .bounceIn('elegant');
    
    await animation.play();
  }
}

♿ Accessibility

Flash-animations automatically:

• ✅ Detects prefers-reduced-motion
• ✅ Reduces duration to 100ms if enabled
• ✅ Simplifies complex animations
• ✅ Maintains semantic HTML

🎯 Current Route Animations

Based on your app.routes.ts:

All working with the hybrid system! ✨

🐛 Troubleshooting

Animations not working?

1. Check component imports RouteAnimationHostComponent
2. Verify <flash-route-animation-host> in template
3. Ensure provideAnimations() in main.ts
4. Rebuild library: yarn nx build flash-animations

Nested routes not animating?

Wrap the nested <router-outlet> with <flash-route-animation-host>.

Want different animation?

Change route.data.animation to any supported type!

📚 Full Documentation

• Overview: _folder.mdc
• How to Use: how-to-use.md
• Hybrid System: hybrid-animation-system.md
• Implementation: FLASH_ANIMATIONS_IMPLEMENTATION.md
• Performance: FLASH_ANIMATIONS_PERFORMANCE_IMPROVEMENTS.md

🎨 Flash Animations - Powerful, Flexible, Reliable!