🎨 Animation Types & Settings
This page covers the different animation types available in AppStruct's Smart Animation system and how to configure their settings for optimal user experience.
Animation Types Overview
AppStruct offers six distinct animation types, each designed for specific use cases and user experiences. Understanding when and how to use each type will help you create engaging, professional animations.
1. Smart Animation
Description: Intelligent transitions that automatically choose the best animation path based on element positions and properties.
Best Used For:
- Complex multi-element transitions
- When you want AppStruct to optimize the animation path
- Mixed content transformations (text, images, shapes)
Settings:
- Duration: 0.3-1.0 seconds (recommended: 0.6s)
- Damping: 200-400 (recommended: 300)
- Stiffness: 500-800 (recommended: 700)
2. Instant Animation
Description: No transition animation - immediate change from one state to another.
Best Used For:
- Testing and debugging animations
- Quick state changes where smooth transitions aren't needed
- Performance-critical scenarios
Settings:
- Duration: Not applicable (instant)
- All other settings ignored
3. Bounce Animation
Description: Elements bounce into their final position with a spring-like effect.
Best Used For:
- Playful, engaging interactions
- Success confirmations
- Attention-grabbing elements
- Gaming or entertainment apps
Settings:
- Duration: 0.4-0.8 seconds (recommended: 0.5s)
- Damping: 50-150 (recommended: 100)
- Stiffness: 300-600 (recommended: 400)
4. Fade Animation
Description: Elements fade out from their original position and fade in at their new position.
Best Used For:
- Subtle, elegant transitions
- Content that changes significantly
- Minimalist design approaches
- When spatial relationship isn't important
Settings:
- Duration: 0.2-0.6 seconds (recommended: 0.4s)
- Damping: Not applicable
- Stiffness: Not applicable
5. Slide Animation
Description: Elements slide smoothly from their old position to their new position in a linear path.
Best Used For:
- Directional navigation
- Card movements
- Panel transitions
- When direction of movement matters
Settings:
- Duration: 0.3-0.7 seconds (recommended: 0.5s)
- Damping: 200-500 (recommended: 350)
- Stiffness: 400-700 (recommended: 600)
6. Zoom Animation
Description: Elements scale during transition, growing or shrinking as they move to their new position.
Best Used For:
- Focus changes
- Modal openings
- Detail view expansions
- Emphasis on size changes
Settings:
- Duration: 0.3-0.8 seconds (recommended: 0.6s)
- Damping: 150-300 (recommended: 250)
- Stiffness: 500-800 (recommended: 650)
Advanced Settings
Duration Control
- Fast (0.2-0.4s): Quick interactions, micro-animations
- Medium (0.5-0.8s): Standard user interactions
- Slow (0.9-1.5s): Dramatic effects, attention-grabbing
Damping (Spring Physics)
- Low (50-150): More bounce and oscillation
- Medium (200-400): Balanced, natural movement
- High (500-1000): Minimal bounce, smooth stop
Stiffness (Spring Response)
- Low (100-300): Slow, gradual acceleration
- Medium (400-700): Natural, responsive movement
- High (800-1000): Fast, snappy response
Easing Curves
- Linear: Constant speed throughout
- Ease In: Slow start, fast finish
- Ease Out: Fast start, slow finish
- Ease In Out: Slow start and finish
- Circ In/Out: Circular motion curves
- Anticipate: Slight backward motion before forward
Choosing the Right Animation Type
Decision Matrix
| Use Case | Recommended Type | Alternative |
|---|---|---|
| Button Press | Smart | Bounce |
| Modal Opening | Zoom | Smart |
| Page Transition | Slide | Fade |
| Card Expansion | Smart | Zoom |
| Content Change | Fade | Smart |
| Success Feedback | Bounce | Smart |
| Navigation | Slide | Smart |
| Focus Change | Zoom | Smart |
Performance Optimization
Best Practices:
- Use Fade for heavy content changes
- Choose Instant for debugging
- Limit Bounce animations to avoid motion sickness
- Test Smart animations on slower devices
- Use shorter durations on mobile devices
Performance Tips:
- Avoid multiple complex animations simultaneously
- Test on target devices regularly
- Consider user preferences for reduced motion
- Monitor animation performance in preview mode
Accessibility Considerations
Motion Sensitivity:
- Provide options to disable animations
- Use Fade instead of Bounce for sensitive users
- Keep animations under 0.5 seconds when possible
- Respect system motion preferences
Next Steps
Learn more about configuring these settings: