Jump to content


Merge squares on scroll

Moderator Tag
Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution



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...


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

  • Like 4
Link to comment
Share on other sites

Look at @Cassie and her fancy flips.


  • Like 2
  • Haha 2
Link to comment
Share on other sites

wahooooo 🙂🙃🙂🙃

  • Haha 2
Link to comment
Share on other sites

A lot of thanks for your help! ❤️

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.