GSAP FLIP using Scrolltrigger not working properly while Scrubbing back to TOP

[Qamar Aziz]

Hi Awesome, GSAP community!

 

I'm trying to achieve scrubbing using GSAP Flip animation.
I'm facing an issue while scrubbing back to the top.

 

Any idea why it's happening? Here is the codepen URL: 

 

When the end of the element crosses the center of the screen, while scrubbing back GSAP FLIP doesn't work properly, am I doing something wrong?

See the Pen XWGozxM by azizqamar7 (@azizqamar7) on CodePen

[Rodrigo]

Hi @Qamar Aziz and welcome to the GSAP Forums!

 

This mostly has to do with the absolute config which is not really needed in this case and the fact that Flip does a lot of cleanup when the animation is completed in order to respect the way the DOM is layed out at the beginning of the animation.

 

This seems to work the way you expect:

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

 

Hopefully this helps.

Happy Tweening!

[Qamar Aziz]

Thank You so much @Rodrigo

The switch of both images is very smooth now. How does'autoAlpha' help make it visible or hidden? I thought it was only used for opacity switch.

[Rodrigo]

Hi,

 

The autoAlpha option is a combination of opacity and visibility, so when you tween/set the autoAlpha value to 0 what GSAP does is animate the opacity to 0 and when the tween is completed it sets the visibility to hidden. If you have an element with opacity: 0 and visibility: hidden and you tween autoAlpha to 1, GSAP starts by setting the visibility property to visible and then animates the opacity to 1 (or any other value different than zero that you passed in the config object.

 

Hopefully this clear things up.

Happy Tweening!

[Qamar Aziz]

Got it. Can we set autoAlpha between 0 and 1 (Like 0.2)?

And what happens to visibility if we set any value between 0 and 1?

[GreenSock]

5 hours ago, Qamar Aziz said:

Got it. Can we set autoAlpha between 0 and 1 (Like 0.2)?

And what happens to visibility if we set any value between 0 and 1?

Think of autoAlpha like simply "opacity" that will automatically set visibility: hidden if/when it hits exactly 0. So yes, you can set autoAlpha to any value between 0 and 1, inclusively. If it's non-zero, visibility will be inherit. 

[Qamar Aziz]

Now I get it. Thank you for making this clear.