​
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

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

​
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

​
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