Use two Flip animations consecutively (with ScrollTrigger)

[clhomme]

Hello everyone!

 

So, basically what the title says. I would like the pink dot to expand as I scroll until it covers the screen completely, and then while I keep scrolling it "reduces" until it gets to the size and position of the yellow block.

 

I have the first part of the animation (the dot expanding) thanks to this forum (^^), but I'm stuck for the second part. Is it possible to use two Flip animations one after the other, and if so, how? Do I need to use a timeline? I've tried making a new Flip animation, but the results were... not good. I don't think I've fully grasped how Flip works, which is why I'm asking for help ^^.

 

Thank you very much for your help!

See the Pen OJazyad by Dhandelyon (@Dhandelyon) on CodePen

[Rodrigo]

Hi,

 

This should boil down mainly to re-parenting the element on each section or part of your DOM and create the ScrollTrigger setup that goes along with that.

 

Is a bit hard to come up with something based on the current setup you have especially since you're calling the doFlip method twice.

 

A working approach to something similar can be seen here:

See the Pen ZEmQBQg by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps get you started.

Happy Tweening!

[clhomme]

@Rodrigo Oh sorry ! I didn't see I called the Flip method twice. Rectified it