Flutter package for creating awesome animations.

Last update: Jun 28, 2022

🎬 Simple Animations

Awesome Flutter Pub

Simple Animations is a powerful package to create beautiful custom animations in no time.

  • πŸ’ͺ fully tested
  • πŸ“ well documented
  • πŸ’Ό enterprise-ready

🌞 Highlights

  • Easily create custom animations in stateless widgets
  • Animate multiple properties at once
  • Create staggered animations within seconds
  • Simplified working with AnimationController instances
  • Debug animations

⛏️ Getting started

Add Simple Animations to your project by following the instructions on the install page.

It contains multiple features. Each covers a different aspect of making animation very simple.

Feature Description
🍹  Liquid Beautiful visual animations that increases the visual quality of your app.
πŸš€  Stateless Animation Widgets for super simple creation of custom animations.
🎭  Timeline Tween Animate multiple properties at once or create staggered animations.
πŸŽ₯  Anicoto Setup managed AnimationControllers instantly.
⏯  Animation Developer Tools Debug animations or create them step by step.

🍹 Liquid

Liquid provides ready-to-use, stunning visual animations that can be explored and configured with Liquid Studio.

plasma

plasma

Open Liquid Studio.


πŸš€ Stateless Animation

Stateless Animation provides a powerful set of Flutter widgets that hide the most complex part of creating animations.

Example: Square with a animated background color. (Example uses supercharged for syntactic sugar.)

PlayAnimation<Color>( // <-- specify type of animated variable
  tween: Colors.red.tweenTo(Colors.blue), // <-- define tween
  builder: (context, child, value) { // <-- builder function
    return Container(
        color: value, // <-- use animated value
        width: 100, 
        height: 100,
    );
});

Read more about it or watch examples.


🎭 Timeline Tween

Timeline Tween (successor of MultiTween) is a mighty tool thats enables you to tween multiple properties or designing staggered animations in a single Animatable.

Example: Custom tween with multiple properties. (Example uses supercharged for syntactic sugar.)

enum AniProps { width, height, color } // <-- define properties

class MyWidget extends StatelessWidget {

  final _tween = TimelineTween<AniProps>() // <-- design tween
    ..addScene(begin: 0.milliseconds, duration: 500.milliseconds)
        .animate(AniProps.width, tween: 0.0.tweenTo(400.0))
        .animate(AniProps.height, tween: 500.0.tweenTo(200.0))
        .animate(AniProps.color, tween: Colors.red.tweenTo(Colors.yellow))
    ..addScene(begin: 700.milliseconds, end: 1200.milliseconds)
        .animate(AniProps.width, tween: 400.0.tweenTo(500.0));

  @override
  Widget build(BuildContext context) {
    return ... // <-- use tween
  }
}

Read more about it or watch examples.


πŸŽ₯ Anicoto

Anicoto fully manages your AnimationController instances and handles initialization, configuration and disposing. No more boilerplate code.

Example: Animated stateful widget with full-fledged AnimationController instance. (Example uses supercharged for syntactic sugar.)

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with AnimationMixin {  // <-- add AnimationMixin to state class

  Animation<double> size; // <-- declare animation variable

  @override
  void initState() {
    size = 0.0.tweenTo(200.0).animatedBy(controller); // <-- connect tween and controller and apply to animation variable
    controller.play(); // <-- start the animation playback
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size.value, // <-- use animation variable's value here 
      height: size.value, // <-- use animation variable's value here
      color: Colors.red
    );
  }
}

Read more about it or watch examples.


⏯ Animation Developer Tools

Tired of watching the same animation over and over again, in order to fine tune it?

devtools

The Animation Developer Tools allows you pause anywhere, scroll around, speed up, slow down or focus on a certain interval of the animation.

Read more about it.


πŸ“ˆ Improve

Simple Animations will improve in future updates. Help me by reporting bugs, submit new ideas for features or anything else that you want to share.

  • Just write an issue on GitHub. ✏️
  • And don't forget to hit the like button for this package ✌️

GitHub

https://github.com/felixblaschke/simple_animations
Comments
  • 1. adding type to builder function causes exception

    I'm trying to add types to everything, but ControlledAnimation is giving me exceptions.

    in the builder, if I use builder: (BuildContext context, value), it works.

    but builder: (BuildContext context, double value) fails with error below.

     ControlledAnimation(
              playback: Playback.LOOP,
              duration: Duration(milliseconds: (5000 / speed).round()),
              tween: Tween(begin: 0.0, end: 2 * pi),
              builder: (BuildContext context, value) {   <<=====  if I use double value, it give error.
                return CustomPaint(
                  foregroundPainter: CurvePainter(value + offset),
                );
              },
            ),
    

    Error:

    _TypeError (type '(BuildContext, double) => CustomPaint' is not a subtype of type '(BuildContext, dynamic) => Widget')

    Any way to fix this?

    Reviewed by sgehrman at 2020-01-23 15:21
  • 2. Weird graphic bugs using Plasma on OnePlus 8

    Hi, I was using Plasma animation in my app when I noticed that on my OnePlus 8 there are a lot of graphic bugs all over the screen (check attachment). The problem persists using both the release and debug versions of the app. I tried with emulators and a Xiaomi Mi A2 but in these cases there are no problems, all works great. I really don't know how to fix this because seems like GPU misses some pixel on the screen...

    Thanks

    https://user-images.githubusercontent.com/66907450/105577486-4a5e0100-5d7a-11eb-97dd-c53d109125c1.mp4

    Reviewed by andreee13 at 2021-01-23 11:57
  • 3. Issue with Plasma on Web and in Liquid Studio

    Hi Felix, @felixblaschke

    I saw your beautiful Liquid Studio on YouTube today and just had to try it. I noticed that there is an issue with the Liquid Studio and the Plasma, most of your provided templates end up looking like this on the Web:

    LiquidStudio3

    This was when running Liquid Studio on latest Chrome and Edge on Windows. I now also tested on Firefox on Windows, same result.

    As I tried different Plasma's in a Flutter app, I noticed it worked fine on Windows Desktop builds, but not on Web builds (using CanvasKit).

    I got the same moving light "white" circle with sparkles in it in some cases when I used the designed Plasma, but not allays. So the bug is not actually in Liquid Studio but in Plasma and probably only on Web builds, and it might be platform related too, because I could not see the issue when I tried in a web browser on an iPad.

    Might be some range issue with the Web build, because later I noticed what is also shown if you look very closely at the animated GIF screen recording (with very low framerate, due to size restriction in GitHub is 5MB for Gifs) that I change the width or the height in Liquid Studio of the container, the problem goes away!

    Reviewed by rydmike at 2020-11-19 21:22
  • 4. Animation starting from different offset even the starting position is same

    `import 'package:flutter/material.dart'; import 'package:simple_animations/simple_animations.dart';

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

    class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Example(), ); } }

    class Example extends StatefulWidget { @override _ExampleState createState() => _ExampleState(); }

    class _ExampleState extends State { @override Widget build(BuildContext context) {

    final _tween=MultiTrackTween([
      Track('slide').add(Duration(milliseconds: 5000),
          Tween<Offset>(begin: Offset(70, 70), end: Offset.zero),)
    ]);
    
    
    
    
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            ControlledAnimation(
              tween: _tween,
              duration: _tween.duration,
              playback: Playback.PLAY_FORWARD,
              builder: (c,a){
                return Transform.translate(offset: a['slide'],child: FlutterLogo(),);
              },
            ),
            ControlledAnimation(
              tween: _tween,
              duration: _tween.duration,
              playback: Playback.PLAY_FORWARD,
              builder: (c,a){
                return Transform.translate(offset: a['slide'],child: FlutterLogo(),);
              },
            )
          ],
        ),
      ),
    );
    

    } }

    `

    Reviewed by KaushickSArgekar at 2020-04-12 04:21
  • 5. The method 'PlasmaRenderer' isn't defined

    Hello, I have exported code from Liquid Studio and There is a class Called PlasmaRenderer there is no good suggestion to export it from any library and I couldn't find how to implement the class from the tutorial.

    Reviewed by amebrahimi at 2021-01-25 10:41
  • 6. Medium articles refer MultiTrackTween and ControlledAnimation (Confusing)

    Hi,I'm just starting to explore animations in Flutter and I just found your plugin and it seem fantastic. I see that in your articles on Medium https://medium.com/@felixblaschke/fancy-background-animations-in-flutter-4163d50f5c37 you use a MultiTrackTween but I don't see it in the docs nor the plugin. in the code

    class AnimatedBackground extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        final tween = MultiTrackTween([
          Track("color1").add(Duration(seconds: 3),
              ColorTween(begin: Color(0xffD38312), end: Colors.lightBlue.shade900)),
          Track("color2").add(Duration(seconds: 3),
              ColorTween(begin: Color(0xffA83279), end: Colors.blue.shade600))
        ]);
    
        return ControlledAnimation(
          playback: Playback.MIRROR,
          tween: tween,
          duration: tween.duration,
          builder: (context, animation) {
            return Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [animation["color1"], animation["color2"]])),
            );
          },
        );
      }
    }
    

    both the MultiTrackTween and ControlledAnimation are not found from the plugin. Aren't they from it? Thank you very much. Cheers

    Reviewed by vinnytwice at 2020-04-25 19:53
  • 7. MultiTrackTween not refreshed after rebuild

    Hello, I have an issue with ControlledAnimation and MultiTrackTween : I want to do a gradient animation with it and trigger the animation when I change a page in my application. The animation is different for each page, so I change the MultiTrackTween instance at every widget rebuild. But when I rebuild my widget and the contained ControlledAnimation, tweens are not updated.

    The code :

    final List<List<Color>> states = [
      [Color(0xFF9768BF), Color(0xFF4DB9B5)],
      [Color(0xFF4DB9B5), Color(0xFF77A338)],
      [Color(0xFF77A338), Color(0xFFC68B1C)],
      [Color(0xFFC68B1C), Color(0xFF9768BF)]
    ];
    
     Widget createAnimation(int page) {
    
        final duration = Duration(milliseconds: 200);
    
        int previousPage = page - 1;
        if (previousPage < 0) previousPage = 3;
    
        MultiTrackTween tweens = MultiTrackTween([
          Track("colorStart").add(
              duration, ColorTween(begin: states[previousPage][0], end: states[previousPage][1])),
          Track("colorEnd").add(
              duration, ColorTween(begin: states[page][0], end: states[page][1])),
        ]);
    
        return ControlledAnimation(
          playback: Playback.START_OVER_FORWARD,
          duration: tweens.duration,
          tween: tweens,
          builder: (context, animation) {
            final start = animation["colorStart"];
            final end = animation["colorEnd"];
    
            return createBackgroundContainer(start, end);
          },
        );
      }
      
      Widget createBackgroundContainer(Color start, Color end) => Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [start, end],
                    begin: Alignment.bottomLeft,
                    end: Alignment.topRight)),
          );
    

    Thank you in advance for your time

    Reviewed by yhuriez at 2019-11-28 16:16
  • 8. value.get() on enum value not set in the MultiTween()

    While transitioning to the new MultiTween from the old MultiTrackTween, I encountered a small issue.

    My usage might be a little bit weird, but I use a CustomAnimation that gets a different MultiTween according to which animation is to be applied to a particular item. I have a List of MultiTweens from which one gets picked.

    I defined an enum with all the values I plan to animate on the item, but I do not animate all of them at once, just a subset of them. Problem is, if I try to use the value.get(myEnum.Valx) the animation library throws an error ("Property 'Valx' does not exist"). So the solutions I found so far are to either ..add each and all those enums to every MultiTween(), or use a trycatch on each of the values when reading them (the latter is what I chose to go with for now). Neither of them are elegant, and I am wondering if there's a way to find out wether a particular enum value is present within the builder function of a CustomAnimation widget, or to have the .get() return 'null' rather than an error.

    Edit: I checked the source code for the MultiTween and found out the assertion is where I get stuck at. Since the _track is an internal parameter I cannot check wether the value is present or not. I think it'd be better for the function .get() to return null in this case rather than throwing an assertion error, as it should tell the property isn't present (I don't think it's possible to have a Tween return null in any other case).

    Reviewed by nicoroy2561 at 2020-10-14 11:31
  • 9. How to tween between two strings?

    I'm trying to reimplement this checkbox (https://felixblaschke.medium.com/custom-animated-control-elements-with-flutter-8c0d352d7136) with the latest version of the library. Mostly it's been painless but I'm drawing a blank on how to tween between the on and off strings. Is there a recommended way to do this? Thanks in advance!

    Reviewed by lordtottuu at 2021-05-03 19:33
  • 10. Use of enum in Track class instead of String for key

    Hi! First time writing an issue, so please forgive me if I'm doing something wrong.

    Just wanted to suggest using enums for the key/name in the Track class. I think it'd improve how you refactor the animation code. Searching for enum usage rather than strings for example.

    I did a quick swap here and it seems to work alright: image

    I'd be happy to do a pull request and change it. Of course, it'd be a breaking change.. So I understand if you rather not.

    Awesome package either way, so thank you for making it!

    Reviewed by AntBlo at 2020-03-28 17:47
  • 11. min sdk 2.14 because of unwaited

    Hi, I'm facing this issue while running a simple fade animation and its throwing me this issue.

    ../../FlutterSdk/flutter/.pub-cache/hosted/pub.dartlang.org/simple_animations-4.0.0/lib/stateless_animation/custom_animation.dart:199:7: Error: The method 'unawaited' isn't defined for the class '_CustomAnimationState'. - '_CustomAnimationState' is from 'package:simple_animations/stateless_animation/custom_animation.dart' ('../../FlutterSdk/flutter/.pub-cache/hosted/pub.dartlang.org/simple_animations-4.0.0/lib/stateless_animation/custom_animation.dart'). Try correcting the name to the name of an existing method, or defining a method named 'unawaited'. unawaited(aniController.reverse(from: 1.0));

    Thanks In Advance

    Reviewed by hardikvij195 at 2021-10-03 19:07

Related

Widgets for creating Hero-like animations between two widgets within the same screen.
Widgets for creating Hero-like animations between two widgets within the same screen.

flutter_sidekick Widgets for creating Hero-like animations between two widgets within the same screen. Features Hero-like animations. Allow you to spe

Jun 25, 2022
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.

flutter_animated_dialog A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations. Dialog barrier i

Apr 4, 2022
Create powerful animations in Flutter and use the hero animation for complex animations
Create powerful animations in Flutter and use the hero animation for complex animations

Hero Animation - Locations UI - Flutter Create powerful animations in Flutter and use the hero animation for complex animations. ⚑  Social Media  Twit

Dec 11, 2021
πŸ”” A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]
πŸ””  A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Jun 29, 2022
A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Apr 26, 2022
A package to create nice and smooth animations for flutter
A package to create nice and smooth animations for flutter

animation_director A package to create nice and smooth animations for flutter Introduction A simple package to build beautiful and smooth animations f

Dec 5, 2021
A Flutter package with a selection of simple yet very customizable set of loading animations.
A Flutter package with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

May 31, 2022
β˜€οΈ A Flutter package for some material design app intro screens with some cool animations.
β˜€οΈ A Flutter package for some material design app intro screens with some cool animations.

IntroViews is inspired by Paper Onboarding and developed with love from scratch. Checkout our fully responsive live example app. Table of contents Fea

Jun 3, 2022
Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.

Lottie for Flutter Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and rende

Jun 28, 2022
A flutter package which will help you to generate pin code fields with beautiful design and animations
A flutter package which will help you to generate pin code fields with beautiful design and animations

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs ?? ??

Jun 22, 2022
A set of transition patterns within the animations package using flutter.
A set of transition patterns within the animations package using flutter.

Flutter Motion Transitions A fultter app to demonstrate Material motion system. Material Motion System The four main Material transition patterns are

Feb 9, 2022
An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more.
An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more.

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. If you appr

Jun 27, 2022
A curated collection of awesome gradients made in Dart for Flutter
A curated collection of awesome gradients made in Dart for Flutter

Flutter Gradients A curated collection of awesome gradients made in Dart (port of https://webgradients.com for Flutter). Only linear gradients include

Apr 21, 2022
A collection of awesome flutter loading animation
A collection of awesome flutter loading animation

loading_indicator_view A collection of awesome flutter loading animation Demo Usage loading_indicator_view: ^1.1.0 Animation types Type Type Type Typ

May 15, 2022
A small library for creating snapping lists.

snaplist A small cozy library that allows you to make snappable list views. Issues and Pull Requests are really appreciated! Snaplist supports differe

Jun 23, 2022
Fun canvas animations in Flutter based on time and math functions.
Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

Jun 15, 2022
Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Dec 28, 2021
Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Oct 24, 2021
Jun 15, 2022