Pin section while horizontal scroll

[Hanan1487]

I need assistance with a web design task. I want to achieve an effect where an image is pinned in place horizontally when it reaches the center of the screen while scrolling, and it should remain pinned until it reaches the end of the section. A good example of this effect can be seen on the website https://sendpotion.com/ Can someone provide guidance or code to achieve this effect?

See the Pen JjwgOrP by 8hanang8 (@8hanang8) on CodePen

[Rodrigo]

Hi @Hanan1487 and welcome to the GSAP forums!

 

Pinning is not something supported when creating fake horizontal scroll animations for logic reasons, because you're not actually scrolling horizontally, you are using GSAP to move on the X axis some elements, nothing more, so in order to resemble pinning, you have to pause that motion on the X axis to make other animations and then resume that motion.

 

In that particular site what's happening is that the container of those videos is being animated on the X axis, not pinned.

 

I think a good fit for this would be Container Animation:

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

 

You can read more about it here:

https://gsap.com/blog/3-8#containeranimation

 

Hopefully this helps.

Happy Tweening!