Jelly Animation

A lightweight Flutter widget that adds a smooth, continuous jelly-like breathing animation to any child widget.

Jelly Animation Demo

Features

  • Organic Motion — Smooth sine-curve breathing that feels alive.
  • Fully Customizable — Control scale amount, duration, and easing curve.
  • Toggle On/Off — Enable or disable animation without rebuilding the widget tree.
  • Zero Dependencies — Only depends on Flutter SDK.
  • Lightweight — Single widget, minimal overhead.

Installation

dependencies:
  jelly_animation: ^<latest_version>

Usage

Wrap any widget with JellyWidget to give it a jelly-like breathing animation:

import 'package:jelly_animation/jelly_animation.dart';

JellyWidget(
  child: Container(
    width: 120,
    height: 120,
    decoration: BoxDecoration(
      color: Colors.orange,
      borderRadius: BorderRadius.circular(24),
    ),
    child: Icon(Icons.star, size: 48, color: Colors.white),
  ),
)

Customization

// Subtle, slow jelly
JellyWidget(
  scaleAmount: 0.04,
  duration: Duration(milliseconds: 1500),
  child: MyWidget(),
)

// Dramatic, fast wobble
JellyWidget(
  scaleAmount: 0.15,
  duration: Duration(milliseconds: 600),
  curve: Curves.bounceOut,
  child: MyWidget(),
)

// Conditionally animated
JellyWidget(
  enabled: isAnimating,
  child: MyWidget(),
)

Parameters

Parameter Type Default Description
child Widget required The widget to animate
scaleAmount double 0.08 How far the jelly stretches (±%)
duration Duration 1000ms Duration of one breathing cycle
curve Curve easeInOutSine Easing curve for the animation
enabled bool true Whether the animation is active

How It Works

The animation simultaneously stretches the widget horizontally while squeezing it vertically (and vice versa), creating the classic "breathing jelly" effect. The transform is applied using Matrix4.scale, so it works with any widget without affecting layout.

License

Licensed under the MIT License.

Libraries

jelly_animation