ScrollTrigger prevent until animation is completed

[Pratyush Panda]

Hey everyone, confused in one of my client's work. Would be grateful if somebody helps out.
I have a two background images, one of 60vh and other of 40vh so that both appear in one page. On scroll I want to change the background x position of first image for example it should go right. Once the top of the viewport touches the top of the image, scroll should be locked and scroll should be continued when the animation completes. If i pin the image, the image is going down with my viewport but I don't want that. The image should be in its initial position, only lock the scroll.
Thanks in advance.😁

[Rodrigo]

Hi @Pratyush Panda and welcome to the GSAP Forums!

 

You can use the Observer Plugin in combination with ScrollTrigger:

https://gsap.com/docs/v3/Plugins/Observer/

 

Here are a couple of demos that can get you started:

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

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

 

Hopefully this helps

Happy Tweening!