Merge squares on scroll

[mariamy]

Hello,
I want to merge squares when user scrolls down - red square must take blue squares position, width, height and rotation smoothly and then will disappear imperceptibly, blue will take green squares params and so on. 

 

How can i do it?

See the Pen JjmLvMj by mari_rap (@mari_rap) on CodePen.

[Cassie]

Hiya!

 

So, the Flip plugin, specifically flip.fit is perfect for this. Check it out. 

See the Pen PoyRBgN?editors=1010 by GreenSock (@GreenSock) on CodePen.

 

However there are 'gotchas' here - it's tricky to scrub a FLIP animation because FLIP is a very dynamic process. When you call Flip or Flip.fit, Flip's basically saying...
 

Quote

Grab the start and end values at that exact time and then animate between them

 

The tricky bit here is that ScrollTrigger animations are calculated on page load whereas Flip animations should be calculated at the exact moment the Flip animation starts. So you'll need to think about what to do if your user resizes their screen in between the page loading and the timeline running. The best route would probably be to kill and reinitiate all you flip/scrolltrigger hybrids when the screen is finished resizing

Here's a demo with a debounced resize event - 

See the Pen PoyRBgN?editors=1011 by GreenSock (@GreenSock) on CodePen.

[PointC]

Look at @Cassie and her fancy flips.

[Cassie]

wahooooo ✨ ????

[mariamy]

A lot of thanks for your help! ❤️