Animations

Smooth 60fps transitions and progressive rendering

Overview

Cristalyse leverages Flutter’s animation engine to deliver buttery-smooth 60fps animations. Every chart type supports customizable animations with different curves, durations, and effects.

Basic Animation

Add smooth entrance animations to any chart:

CristalyseChart()
  .data(data)
  .mapping(x: 'x', y: 'y')
  .geomPoint()
  .animate(
    duration: Duration(milliseconds: 800),
    curve: Curves.easeInOut,
  )
  .build()

Animation Curves

Choose from Flutter’s extensive curve library:

Elastic Effects

Perfect for playful interfaces:

CristalyseChart()
  .data(data)
  .mapping(x: 'category', y: 'value')
  .geomBar()
  .animate(
    duration: Duration(milliseconds: 1200),
    curve: Curves.elasticOut,
  )
  .build()

Bounce Animation

Add character to your visualizations:

CristalyseChart()
  .data(data)
  .mapping(x: 'x', y: 'y')
  .geomPoint(size: 8.0)
  .animate(
    duration: Duration(milliseconds: 1000),
    curve: Curves.bounceOut,
  )
  .build()

Smooth Transitions

For professional dashboards:

CristalyseChart()
  .data(data)
  .mapping(x: 'month', y: 'value')
  .geomLine(strokeWidth: 3.0)
  .animate(
    duration: Duration(milliseconds: 1500),
    curve: Curves.easeInOutCubic,
  )
  .build()

Chart-Specific Animations

Progressive Line Drawing

Lines animate from start to finish:

CristalyseChart()
  .data(timeSeriesData)
  .mapping(x: 'date', y: 'price')
  .geomLine(strokeWidth: 2.0)
  .animate(duration: Duration(milliseconds: 2000))
  .build()

Staggered Bar Growth

Bars animate individually with delays:

CristalyseChart()
  .data(categoryData)
  .mapping(x: 'category', y: 'value')
  .geomBar()
  .animate(
    duration: Duration(milliseconds: 1400),
    curve: Curves.easeInOutBack,
  )
  .build()

Point Emergence

Scatter plot points appear progressively:

CristalyseChart()
  .data(scatterData)
  .mapping(x: 'x', y: 'y', color: 'category')
  .geomPoint(size: 6.0, alpha: 0.8)
  .animate(
    duration: Duration(milliseconds: 800),
    curve: Curves.elasticOut,
  )
  .build()

Area Fill Animation

Area charts fill progressively:

CristalyseChart()
  .data(volumeData)
  .mapping(x: 'month', y: 'volume')
  .geomArea(alpha: 0.3, strokeWidth: 2.0)
  .animate(
    duration: Duration(milliseconds: 1600),
    curve: Curves.easeInOutCubic,
  )
  .build()

Advanced Animation Techniques

Layered Animations

Combine multiple geometries with different timings:

CristalyseChart()
  .data(data)
  .mapping(x: 'week', y: 'engagement')
  .geomArea(alpha: 0.2, strokeWidth: 0)     // Background area
  .geomLine(strokeWidth: 3.0)               // Trend line
  .geomPoint(size: 6.0)                     // Data points
  .animate(
    duration: Duration(milliseconds: 1800),
    curve: Curves.easeInOutCubic,
  )
  .build()

Stacked Bar Segments

Each segment animates individually:

CristalyseChart()
  .data(stackedData)
  .mapping(x: 'quarter', y: 'revenue', color: 'category')
  .geomBar(style: BarStyle.stacked)
  .animate(
    duration: Duration(milliseconds: 1600),
    curve: Curves.easeInOutQuart,
  )
  .build()

Dual Axis Coordination

Synchronize animations across different Y-axes:

CristalyseChart()
  .data(businessData)
  .mapping(x: 'month', y: 'revenue')
  .mappingY2('conversion_rate')
  .geomBar(yAxis: YAxis.primary)
  .geomLine(yAxis: YAxis.secondary, strokeWidth: 3.0)
  .animate(
    duration: Duration(milliseconds: 1400),
    curve: Curves.easeInOutCubic,
  )
  .build()

Animation Curves Reference

Ease Curves

• Curves.easeIn - Slow start, fast finish
• Curves.easeOut - Fast start, slow finish
• Curves.easeInOut - Slow start and finish
• Curves.easeInOutCubic - Smooth S-curve

Elastic & Bounce

• Curves.elasticIn - Spring compression
• Curves.elasticOut - Spring release
• Curves.bounceIn - Bouncing entrance
• Curves.bounceOut - Bouncing exit

Back Curves

• Curves.easeInBack - Slight overshoot at start
• Curves.easeOutBack - Slight overshoot at end
• Curves.easeInOutBack - Overshoot both ends

Specialized

• Curves.fastOutSlowIn - Material Design standard
• Curves.slowMiddle - Fast start/end, slow middle
• Curves.decelerate - Quick deceleration

Performance Optimization

Duration Guidelines

Choose appropriate durations for different chart types:

• Scatter plots: 600-1000ms
• Line charts: 1000-2000ms
• Bar charts: 800-1400ms
• Area charts: 1200-1800ms
• Complex dual-axis: 1400-2200ms

Memory Efficiency

Cristalyse animations are optimized for:

• GPU acceleration - Leverages Flutter’s rendering pipeline
• Minimal redraws - Only animates changing elements
• Smooth 60fps - Consistent frame rates across devices
• Memory efficient - Automatic cleanup after animation

Interactive Animation

Data Updates

Smooth transitions when data changes:

class AnimatedDashboard extends StatefulWidget {
  @override
  _AnimatedDashboardState createState() => _AnimatedDashboardState();
}

class _AnimatedDashboardState extends State<AnimatedDashboard> {
  List<Map<String, dynamic>> data = initialData;

  void updateData() {
    setState(() {
      data = newData; // Chart automatically animates to new data
    });
  }

  @override
  Widget build(BuildContext context) {
    return CristalyseChart()
      .data(data)
      .mapping(x: 'month', y: 'value')
      .geomLine(strokeWidth: 3.0)
      .animate(duration: Duration(milliseconds: 800))
      .build();
  }
}

Theme Transitions

Smooth theme changes:

CristalyseChart()
  .data(data)
  .mapping(x: 'x', y: 'y')
  .geomPoint()
  .theme(isDark ? ChartTheme.darkTheme() : ChartTheme.defaultTheme())
  .animate(duration: Duration(milliseconds: 600))
  .build()

Best Practices

Duration Selection

• Short animations (300-600ms) for simple interactions
• Medium animations (800-1400ms) for chart rendering
• Long animations (1500-2500ms) for complex visualizations
• Avoid animations longer than 3 seconds

Curve Selection

• Use easeInOutCubic for professional dashboards
• Use elasticOut for engaging presentations
• Use fastOutSlowIn for Material Design consistency
• Avoid jarring curves like bounceIn for serious data

Performance

• Test on slower devices to ensure 60fps
• Consider reducing animation complexity for large datasets
• Use shouldRepaint optimization for static elements
• Profile animation performance during development

Accessibility

• Respect user’s reduced motion preferences
• Provide option to disable animations
• Ensure animations don’t interfere with screen readers
• Use appropriate duration for cognitive accessibility

Animation Showcase

Progressive Line Drawing

Lines draw smoothly from start to finish, perfect for revealing trends

Staggered Bar Growth

Bars grow individually with delays, creating engaging sequences

Point Emergence

Scatter plot points appear progressively with elastic effects

Area Fill Animation

Areas fill smoothly with coordinated stroke and fill animations

Next Steps

Theming

Customize visual styles and color schemes

Interactions

Add tooltips, hover effects, and user interactions

Performance

Optimize charts for large datasets and smooth rendering

Export

Export animated charts as high-quality graphics