Fluid Animations

Create effortlessly smooth and responsive animations in your Flutter apps inspired by Apple's SwiftUI animations.

Features

• ⚡️ Effortlessly create smooth and responsive spring animations
• 🎨 Choose from preset animation styles (bouncy, smooth, snappy, interactive, ...)
• 🔧 Simplify creating smooth animations

Usage

The simplest way of creating a spring is using the prebuilt ones. For example:

final mySpring = FluidSpring.bouncy;

You can also create custom springs. FluidSpring has two properties: duration and bounce.

final mySpring = FluidSpring(bounce: 0.4, duration: 0.5);

Duration: Defines the pace of the spring. This is approximately equal to the settling duration.

Bounce: How bouncy the spring should be. A value of 0 indicates no bounces, positive values indicate increasing amounts of bounciness up to a maximum of 1.0 (corresponding to undamped oscillation), and negative values indicate overdamped springs with a minimum value of -1.0.

Animating

The simplest way to animate your widgets with a spring is using the FluidTransitionBuilder. It animates all changes of value using a spring.

FluidTransitionBuilder<double>(
  value: isHovered ? 200.0 : 100.0,
  spring: FluidSpring.bouncy, // Use a bouncy spring animation
  builder: (animation, child) {
    return Container(
      width: animation.value,
      height: animation.value,
      child: child,
    );
  },
  child: const FlutterLogo()
);

When you need more control over your animation you can also use a AnimationController and run a spring simulation.

final spring = FluidSpring.smooth;

final simulation = SpringSimulation(spring, 0, 1, 0);

_controller.animateWith(simulation);

See the flutter example on how to animate a widget using a physics simulation.

Animate using keyframes

You can also create a complex custom animation using keyframes.

This example defines an animation that starts at 1 then interpolates to 0.8 for 20% of the animation's duration using a easing curve. Then it interpolates to 1.4 for 50% of the duration using a spring and then settles back to 1 for the last 30% of the animation using a different spring.

final Animation<double> scaleAnimation = KeyframeAnimation<double>(
    startingValue: 1,
    keyframes: const [
      CurvedKeyframe(
        value: 0.8,
        duration: 0.2,
        curve: Curves.easeIn,
      ),
      SpringKeyframe(
        value: 1.4,
        duration: 0.5,
        spring: FluidSpring.bouncy,
      ),
      SpringKeyframe(
        value: 1,
        duration: 0.3,
        spring: FluidSpring.smooth,
        velocity: 2,
      ),
    ],
  ).animate(myAnimationController);

2D Spring animations

For 2D animations (e.g. animating positions like those seen in the demo video), use the SpringSimulation2D class. Refer to the example implementation for guidance.

Acknowledgements

The math used is based on this amazing article.

Values for the prebuilt springs are from the Apple Documentation on animation.