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.