Flutter already provides smooth animations out of the box.
But when it comes to page transitions, most apps still use the same default slide animations.
I wanted something that felt:
- softer
- more interactive
- visually satisfying
- modern
Something that could give apps a unique personality.
That’s how Squishy was created 🚀
✨ What is Squishy?
Squishy is a Flutter package that provides modern organic page transitions with simple APIs.
Instead of boring default transitions, Squishy introduces effects like:
- 🫠 Blob transitions
- 🔥 Gooey liquid reveals
- ✨ Elastic bounce animations
- 🚀 Stretch/rubber transitions
The goal was simple:
Make navigation feel alive.
🧠 The Idea Behind It
Modern UI design is becoming more fluid and interactive.
Apps today are moving toward:
- liquid animations
- soft physics
- playful motion
- organic transitions
I wanted to experiment with transitions that feel:
- smooth like liquid
- stretchy like rubber
- soft like slime
- responsive like real-world motion
Instead of creating another generic animation package, I focused on giving each effect its own identity.
| Effect | Feel |
|---|---|
| Elastic | Bouncy & playful |
| Blob | Organic & fluid |
| Stretch | Rubber-like reveal |
| Gooey | Sticky liquid motion |
🚀 Installation
Add Squishy to your pubspec.yaml
```yaml id="z5wy4v"
dependencies:
squishy: ^0.0.1
Then run:
```bash id="l7gf3g"
flutter pub get
✨ Using Squishy
Using the package is intentionally simple.
```dart id="cvb4ut"
Navigator.of(context).push(
SquishyPageRoute(
page: const NextScreen(),
effect: SquishyEffect.blob,
),
);
That’s it.
---
# 🫠 Blob Transition
The Blob effect creates an organic liquid-like page reveal.
It was one of the first effects I built and instantly became the identity of the package.
The animation uses:
* custom clipping
* bezier curves
* animated reveal paths
to create a soft flowing transition.
---
# 🔥 Gooey Effect
The Gooey transition was designed to feel like sticky liquid separating between screens.
This effect was especially fun to experiment with because small curve adjustments completely changed the feel of the animation.
Creating smooth organic motion is much harder than traditional UI animations because:
* curves must feel natural
* motion must remain smooth
* performance must stay optimized
---
# 🚀 Stretch Transition
Stretch focuses more on rubber-like motion.
Instead of looking liquid, it feels like the page is stretching before opening.
This creates a more dramatic and playful interaction.
---
# 🎨 Designing the Demo App
I also wanted the demo app to look minimal and modern.
The showcase uses:
* off-white background
* bordered buttons
* clean spacing
* soft UI design
so the focus remains on the animations themselves.
---
# 🧩 Challenges During Development
One of the biggest challenges was making each effect feel different.
Many liquid effects can start looking too similar if:
* curves overlap
* reveal motion feels identical
* animation timing is the same
So a lot of time went into:
* tweaking bezier curves
* adjusting animation physics
* experimenting with reveal paths
to make every transition feel unique.
---
# 🌟 What I Learned
Building Squishy taught me a lot about:
* Flutter animations
* custom clippers
* animation curves
* package structure
* open source publishing
* documentation
* UI motion design
More importantly, it taught me how much small details matter in UI experiences.
Even subtle motion can completely change how an app feels.
---
# 🔮 Future Plans
Some future ideas for Squishy include:
* advanced liquid swipe transitions
* morphing page reveals
* gesture-driven animations
* customizable physics
* interactive transitions
* better performance optimizations
---
# 🌐 Links
## Pub.dev
[https://pub.dev/packages/squishy](https://pub.dev/packages/squishy)
## GitHub
[https://github.com/Sakshi-2508/squishy]
(https://github.com/Sakshi-2508/squishy)
---
# 💙 Final Thoughts
Publishing an open-source package feels amazing because it turns an idea into something developers around the world can actually use.
Squishy started as an experiment with page transitions, but it became a learning experience in animation design, package development, and creative UI engineering.
And honestly…
This is just the beginning 🚀
#Flutter #FlutterDev #OpenSource #Dart #Animation #MobileDevelopment #UIUX
Top comments (0)