Share Posted May 9 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 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted May 9 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 4 Link to comment Share on other sites More sharing options...
Share Posted May 9 Look at @Cassie and her fancy flips. 2 2 Link to comment Share on other sites More sharing options...
Author Share Posted May 10 A lot of thanks for your help! ❤️ 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now