How to sync element transition with other element position

[wegago]

I have three sections and three images.
I want each image height to be reduced according to the position of each corresponding section.

The provided codepen example is what I achieved so far.

 

I want to achieve something like that example: 

See the Pen abNMeYp by smoothdev35 (@smoothdev35) on CodePen

But I can't make it work with my example.

Any gaudiness and help will be appreciated.
Thanks.

See the Pen zYLKEeb by TheOneWhoCodes (@TheOneWhoCodes) on CodePen

[Rodrigo]

Hi @wegago and welcome to the GreenSock forums!

 

The issue here is related to the index you're applying to the ScrollTrigger instances on the images loop and the start point for each image. You have to factor the start point of the text block element and the height of the images(since they have the same height as the images containers).

 

Something like this:

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

 

Finally your example is using very old versions of GSAP (3.5) and ScrollTrigger (3.3) that also don't match. Is strongly recommended to use the latest versions of the core and the plugins. If that is not an option, then at least use the same version for both.

 

Hopefully this is enough to get you started. Let us know if you have more questions.

 

Happy Tweening!