0Pricing
Flutter Mobile Development · Lesson

Staggered and Choreographed AnimationControllers

Orchestrate multiple animations with intervals and curves for choreographed sequences.

What Is a Staggered Animation?

A staggered animation is a sequence where several visual changes happen at different times within a single timeline, instead of all at once.

Think of a card that first fades in, then slides up, then its icon rotates. Each step starts and ends at a different point along one shared clock.

  • One AnimationController drives the master clock (0.0 to 1.0).
  • Each property gets its own slice of that clock via an Interval.
  • This keeps everything perfectly in sync because they share the same time source.

This lesson focuses on orchestrating multiple animations with intervals and curves to build choreographed sequences.

One Controller, Many Tweens

The core pattern: a single AnimationController defines the total duration, and you derive multiple Animation objects from it.

The controller value moves linearly from 0.0 to 1.0. Each animation reads that value but maps it to its own range and timing window.

  • controller.value is the shared progress.
  • Tween maps 0..1 to your target values (offsets, opacity, scale).
  • CurvedAnimation applies easing and timing windows.

Why one controller instead of many? Because synchronizing several independent controllers is error-prone. A single timeline guarantees the steps never drift apart.

// Conceptual mapping of a shared 0..1 clock to staggered slices.
void main() {
  // Master clock samples (what the controller would emit each frame).
  final samples = [0.0, 0.25, 0.5, 0.75, 1.0];

  // Opacity runs over the first half: interval [0.0, 0.5].
  double opacity(double t) {
    final local = ((t - 0.0) / (0.5 - 0.0)).clamp(0.0, 1.0);
    return local; // 0 -> 1 across the slice
  }

  // Slide runs over the second half: interval [0.5, 1.0].
  double slide(double t) {
    final local = ((t - 0.5) / (1.0 - 0.5)).clamp(0.0, 1.0);
    return 1.0 - local; // 1 -> 0 (slides into place)
  }

  for (final t in samples) {
    print('t=$t opacity=${opacity(t)} slideY=${slide(t)}');
  }
}

All lessons in this course

  1. Embedding Rive Assets and Controllers
  2. State Machines and Input-Driven Motion
  3. Hero Transitions and Shared Element Motion
  4. Staggered and Choreographed AnimationControllers
← Back to Flutter Mobile Development