Getting a smooth transition between multiple GSAP elements

[ThomasDeer]

Does anybody have any idea on how i can make the transition between these 2 elements as smooth as possible on both desktop and mobile, 

I seem to get an instant white overlay rather than a smooth change between them, Happy to play around with any suggestions that can make this work as smooth as possible

See the Pen xxaobXd by ItBeTommo (@ItBeTommo) on CodePen.

[Rodrigo]

Hi Thomas,

 

Your setup is a bit convoluted IMHO. Why two different document ready events? Then inside one of those you have a load event (most likely to check for all the images to be loaded).

 

If your images are creating some sort of layout shift, it'd be better to just create all your GSAP and ScrollTrigger instances after that and not spread everything into three different events handlers for two events. If you want to keep a more functional approach and you want to create more than one function to create your GSAP/ScrollTrigger instances then by all means do that, no problem there. The whole point is to simplify the ready/load events handling part part.

 

On top of that you have a ScrollTrigger instance that has once set to true, the zoom instance, but it seems that this one is being created before the previous section's ScrollTrigger. That definitely could be a source of issues. Always do your best to create your ScrollTrigger instances in the order they appear on the screen. So my advice would be to create the slider ScrollTrigger first and then the Zoom ScrollTrigger instance and a single event handler for the load event or track all your images load state in order to know when to create the ScrollTrigger instances. That will give you far better control and could solve the issue you're seeing right now.

 

I forked your codepen and inverted the order to the document ready events and it seems to work like you expect:

See the Pen qBMzaRr by GreenSock (@GreenSock) on CodePen.

 

Although it seems to work, I wouldn't trust this approach and try to follow the advice on simplifying your current approach.

 

Hopefully this helps.

Happy Tweening!