ScrollTrigger - Text Scroll One Side / Pin Image Right Side

[antenna_richard]

Hello,

 

I'm having issues with getting this to work. I am trying to have a 50/50 section with content on left side and image on right side. I need the image to be pinned, while the text sections on the left to scroll and fade in/out.

 

I've attached a photo for reference of what I'm looking for. Thanks!

[GreenSock]

Welcome to the forums, @antenna_richard.

 

I'd recommend poking through these demos to see if you can find a good starting point: 

https://greensock.com/st-demos/

 

And then just fork it and start trying to build what you want. If you get stuck, feel free to post back here with a minimal demo and a GSAP-specific question and we'd be happy to help. 

 

Here are a couple of demos that might be helpful: 

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

 

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

 

Happy tweening!

[antenna_richard]

Thanks for the reply

 

See the Pen ExpWPwV by AntennaRichard (@AntennaRichard) on CodePen

See the Pen GRBWoQQ by AntennaRichard (@AntennaRichard) on CodePen

 

I tried both approaches and didn't have much luck. I am able to interact with the content in the first demo but unable to have it function how I'm intending. Basically trying to get what was done in the second demo provided except instead of the boxes scrolling, its the text. 

 

[Rodrigo]

Hi,

 

Hopefully  this approach helps:

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

 

Let us know if you have more questions.

 

Happy Tweening!