flutter_animation_sequencer

pub package License: MIT Flutter

A declarative, chainable animation timeline for Flutter. Sequence, stagger, group, and reverse complex multi-widget animations without manually managing multiple AnimationControllers.

Think of it as a Rive-like timeline control written in pure Dart/Flutter.

Features

  • Chainable API: Define animations using a clean, readable syntax.
  • Auto-managed Controllers: No need to worry about AnimationController lifecycles.
  • Built-in Steps: Support for Fade, Slide, Scale, Rotate, and Color animations.
  • Sequencing Modes: Run steps sequentially, in parallel (group), or staggered.
  • Playback Control: Play, pause, stop, reset, and reverse animations programmatically.
  • Auto-Dispose: Easy integration with SequencerStateMixin.

Installation

Add flutter_animation_sequencer to your pubspec.yaml:

dependencies:
  flutter_animation_sequencer: ^1.0.0

Quick Start

import 'package:flutter/material.dart';
import 'package:flutter_animation_sequencer/flutter_animation_sequencer.dart';

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with SingleTickerProviderStateMixin, SequencerStateMixin {
  @override
  AnimationSequence get sequence => AnimationSequence()
    .then(FadeStep(from: 0, to: 1, duration: Duration(milliseconds: 400)))
    .then(SlideStep(from: Offset(0, 50), to: Offset.zero, duration: Duration(milliseconds: 300)));

  @override
  Widget build(BuildContext context) {
    return AnimationSequencer(
      controller: sequencer,
      sequence: sequence,
      builder: (context, animatedValues) => Opacity(
        opacity: animatedValues.opacity,
        child: Transform.translate(
          offset: animatedValues.offset,
          child: Container(width: 100, height: 100, color: Colors.blue),
        ),
      ),
    );
  }
}

Usage

Basic Chaining with then()

Run animations one after another.

AnimationSequence()
  .then(FadeStep(from: 0, to: 1, duration: Duration(milliseconds: 400)))
  .then(ScaleStep(from: 0.5, to: 1, duration: Duration(milliseconds: 300)))

Staggered Animations with thenStagger()

Animate multiple properties or widgets with a delay between them.

AnimationSequence()
  .thenStagger([
    ScaleStep(from: 0.8, to: 1.0, duration: Duration(milliseconds: 200)),
    FadeStep(from: 0.5, to: 1.0, duration: Duration(milliseconds: 200)),
  ], staggerDelay: Duration(milliseconds: 80))

Parallel Animations with thenGroup()

Run multiple animations simultaneously.

AnimationSequence()
  .thenGroup([
    RotateStep(fromRadians: 0, toRadians: 3.14, duration: Duration(milliseconds: 500)),
    FadeStep(from: 1, to: 0.5, duration: Duration(milliseconds: 500)),
  ])

Playback Control

Use SequencerController to control the animation.

sequencer.play();
sequencer.pause();
sequencer.stop();
sequencer.reset();
sequencer.reverse();

Available Step Types

Step Type Properties
FadeStep from, to, duration, delay, curve
SlideStep from, to, duration, delay, curve
ScaleStep from, to, duration, delay, curve
RotateStep fromRadians, toRadians, duration, delay, curve
ColorStep from, to, duration, delay, curve
WaitStep duration

License

MIT License. See LICENSE for details.

Author

George Ikwegbu

Libraries

flutter_animation_sequencer