How would you create this page transition?

[Callmephil]

I’m trying to get better at motion and page transitions and eventually master animations as a whole.

Sometimes I just get stuck for hours trying to figure out how some things are being done in the simplest way possible.

I’m struggling on this one, frankly, I have no idea which Clipper I should use, and the math behind it.

Original post:
https://x.com/emilkowalski_/status/1886772370246979916

Some recent work/practice

Side Sheet Page Transition and Tab Sync SliverList in Flutter

Bi-directional card opening page transition with micro animation in Flutter.

On-boarding animations, page transitions, and dynamic resizing of logo based on available space in Flutter.

Vibe Coded Fireworks (gist: flutter fireworks (gemini) · GitHub )

Modern inputs (ChatGPT-like) in Flutter, with expandable.

Positional Expand Transition Flutter

Revolut Credit Card Page Transition Flutter

[TheFlutterGuy]

I would suggest applying a custom clipPath that takes in a control point that scales the clipped area. You need to pass your transition animation to that control point.
And based on the sample you provided, you can use a fade transition or adjust the opacity.
→ My point is, you can achieve it, the clipper is the challenge.

[Callmephil]

Thanks!

turns out my clipper was missing the animation progress property. Also I was using FadeTransition which was affecting the whole page at once so I ended up doing it with opacity and black color to hide background element while adding new one. The code needs some optimizations I guess but I I’m happy I finally did it!

Results:

[TheFlutterGuy]

GG bro.. keep up the good work

[Callmephil]

Thanks!

I’ll drop a package soon I have a few more I want to achieve