Staggered animations in Flutter

Introduction

Staggered animations help make your app look smooth and interesting by playing multiple animations one after another with small delays.

When you want buttons or images to appear one by one instead of all at once.

When showing a list where each item slides or fades in with a delay.

When you want to guide the user's attention step-by-step with animations.

When making splash screens or onboarding screens more lively.

When animating complex UI parts that have many moving pieces.

Syntax

Flutter

AnimationController controller = AnimationController(vsync: this, duration: Duration(seconds: 2));

Animation<double> animation1 = Tween(begin: 0.0, end: 1.0).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(0.0, 0.5, curve: Curves.easeIn),
  ),
);

Animation<double> animation2 = Tween(begin: 0.0, end: 100.0).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(0.5, 1.0, curve: Curves.easeOut),
  ),
);

The Interval defines when each animation starts and ends within the total duration.

Use AnimationController to control the timing of all animations together.

Examples

This animation fades in an element during the first 30% of the total animation time.

Flutter

AnimationController controller = AnimationController(vsync: this, duration: Duration(seconds: 3));

Animation<double> fadeIn = Tween(begin: 0.0, end: 1.0).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(0.0, 0.3),
  ),
);

This animation moves an element to the right between 30% and 70% of the total animation time.

Flutter

Animation<double> moveRight = Tween(begin: 0.0, end: 200.0).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(0.3, 0.7, curve: Curves.easeInOut),
  ),
);

This animation fades out the element during the last 30% of the animation time.

Flutter

Animation<double> fadeOut = Tween(begin: 1.0, end: 0.0).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(0.7, 1.0, curve: Curves.easeOut),
  ),
);

Sample App

This app shows a blue square that first fades in during the first half of 3 seconds, then grows bigger during the second half.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: StaggeredAnimationWidget(),
        ),
      ),
    );
  }
}

class StaggeredAnimationWidget extends StatefulWidget {
  const StaggeredAnimationWidget({super.key});

  @override
  State<StaggeredAnimationWidget> createState() => _StaggeredAnimationWidgetState();
}

class _StaggeredAnimationWidgetState extends State<StaggeredAnimationWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _opacityAnimation;
  late Animation<double> _sizeAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    );

    _opacityAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
      ),
    );

    _sizeAnimation = Tween<double>(begin: 50.0, end: 150.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: const Interval(0.5, 1.0, curve: Curves.easeOut),
      ),
    );

    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Opacity(
          opacity: _opacityAnimation.value,
          child: Container(
            width: _sizeAnimation.value,
            height: _sizeAnimation.value,
            color: Colors.blue,
          ),
        );
      },
    );
  }
}

Important Notes

Always dispose your AnimationController to free resources.

Use AnimatedBuilder to rebuild only the parts that need animation updates.

Staggered animations make your UI feel more natural and less sudden.

Summary

Staggered animations run multiple animations one after another with delays.

Use Interval to control when each animation runs inside the total duration.

They help create smooth, engaging user experiences.

Practice

1. What is the main purpose of using staggered animations in Flutter?

easy

A. To run multiple animations one after another with delays

B. To run all animations at the same time without delay

C. To stop animations from running automatically

D. To create static UI elements without animation

Solution

1. Step 1: Understand staggered animation concept

   Staggered animations run animations sequentially with delays between them.

2. Step 2: Compare options with concept

   Only To run multiple animations one after another with delays describes running animations one after another with delays.

3. Final Answer:

   To run multiple animations one after another with delays -> Option A

4. Quick Check:

   Staggered animations = sequential with delays [OK]

Hint: Remember staggered means animations start one after another [OK]

Common Mistakes:

• Thinking staggered means all animations run together
• Confusing staggered with stopping animations
• Assuming staggered animations create static UI

2. Which Flutter class is used to control the timing of each animation in a staggered animation?

easy

A. Tween

B. AnimationController

C. Interval

D. AnimatedBuilder

Solution

1. Step 1: Identify timing control in staggered animations

   The Interval class defines when each animation runs inside the total duration.

2. Step 2: Match classes with their roles

   Tween defines value changes, AnimationController controls animation progress, AnimatedBuilder rebuilds UI. Only Interval controls timing segments.

3. Final Answer:

   Interval -> Option C

4. Quick Check:

   Interval controls animation timing [OK]

Hint: Interval sets animation start and end times inside total duration [OK]

Common Mistakes:

• Confusing Tween with timing control
• Using AnimationController for timing intervals
• Thinking AnimatedBuilder controls timing

3. Given this code snippet, what will be the start time of the second animation if the total duration is 4 seconds?

final animation1 = Tween(begin: 0.0, end: 1.0).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(0.0, 0.5),
  ),
);
final animation2 = Tween(begin: 0.0, end: 1.0).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(0.5, 1.0),
  ),
);

medium

A. 0 seconds

B. 1 second

C. 4 seconds

D. 2 seconds

Solution

1. Step 1: Understand Interval values and total duration

   Interval(0.5, 1.0) means the animation starts at 50% of total duration.

2. Step 2: Calculate start time

   50% of 4 seconds = 0.5 * 4 = 2 seconds.

3. Final Answer:

   2 seconds -> Option D

4. Quick Check:

   Interval start 0.5 x 4s = 2s [OK]

Hint: Multiply Interval start by total duration for start time [OK]

Common Mistakes:

• Using Interval end value as start time
• Confusing percentage with seconds directly
• Ignoring total duration in calculation

4. What is wrong with this staggered animation code snippet?

final animation1 = Tween(begin: 0.0, end: 1.0).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(0.6, 0.4),
  ),
);

medium

A. Tween begin and end values are reversed

B. Interval start value is greater than end value

C. AnimationController is missing

D. CurvedAnimation cannot be used with Tween

Solution

1. Step 1: Check Interval parameters

   Interval requires start value less than end value. Here start=0.6, end=0.4 which is invalid.

2. Step 2: Verify other parts

   Tween values are valid, AnimationController is parent, CurvedAnimation usage is correct.

3. Final Answer:

   Interval start value is greater than end value -> Option B

4. Quick Check:

   Interval start must be less than end [OK]

Hint: Interval start must be less than end value [OK]

Common Mistakes:

• Swapping Interval start and end values
• Assuming Tween values cause error
• Missing AnimationController parent

5. You want to create a staggered animation with three animations each lasting 1 second, running one after another in a total 3-second controller duration. Which Interval values correctly define the timing for the third animation?

hard

A. Interval(0.66, 1.0)

B. Interval(0.33, 0.66)

C. Interval(0.0, 0.33)

D. Interval(0.5, 1.0)

Solution

1. Step 1: Divide total duration into three equal parts

   Each animation lasts 1 second, total duration is 3 seconds, so each part is 1/3 = 0.33 (approx).

2. Step 2: Calculate Interval for third animation

   Third animation starts after first two: start = 2 x 0.33 = 0.66, end = 1.0 (full duration).

3. Final Answer:

   Interval(0.66, 1.0) -> Option A

4. Quick Check:

   Third animation Interval = 0.66 to 1.0 [OK]

Hint: Divide total duration by number of animations for Intervals [OK]

Common Mistakes:

• Using overlapping intervals
• Starting third animation too early
• Not dividing total duration evenly