Horizontal image with text animation

[Viz]

Hi Guys,

 

Thanks for this awesome gsap lib again. I'm still learning it but the library is really powerful and quite fun to explore.

 

I need some help with the animation where my container gets pinned on screen and then the image is horizontally moved with the scrolling. This part works fine in the codepen above. 

What I need with this is for the text in the adjacent container to smoothly show hide along with this image movement. Obviously the number of texts will be the same as the image movements so that wont be a problem.

 

Thanks for any help in advance.

See the Pen xxRVpGQ by vsaini603 (@vsaini603) on CodePen

[mikel]

Hey @Viz,

 

Here is a concept, maybe it will help you.

 

See the Pen NWRoQJo by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[ZachSaucier]

Hey Viz. First you need to set up the additional text the way that you need it to be. Then you apply the same sort of animation to it as the images (most likely it'd be easiest if they use the same timeline and ScrollTrigger). 

 

If you have a specific question, feel free to ask and we'll do our best to help.

[Viz]

Hey Guys,

 

I've managed to solve the problem of syncing the image and text by using the onComplete and onReversecomplete functions for each stagger. Posting the solved pen here for anyone who might need it in future.

See the Pen ExNybqQ by vsaini603 (@vsaini603) on CodePen

 

@mikel: Thanks for the reference.