Scrolltrigger array of items and triggers

[buruszur]

Hi,
First of all I would like to thank you all for the help. I am complete gsap noob so I would like to sorry all of you if the soultion is so obvious that it's almost painfull not to see this. I would like to create set of headings that are triggered by particular groups in the second column. Changing first to second item is not a problem, but third is not working. The questions is only about changing header in the left column, so my codepen is trimmed to minium.

 

Fully working effects is on this page: https://dashdigital.studio/about so you can see final outcome. 

Thank you for all your insights and help. 

See the Pen GRXRaBr by jarsson (@jarsson) on CodePen

[mvaneijgen]

Hi @buruszur welcome to the forum!

 

When working with ScrollTrigger the best thing to do is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

That is what I did with your pen, I had to change your CSS a bit to get everything setup correctly and make is so that all the text is overlapped on top of each other. It seems to me that you needed three titles in your setup, so I added one extra. Then I've created a timeline instead of a single tween. I've add labels to that timeline at points I want to animate to. And then in ScrollTrigger I do the same logic as you'd used, but animate to the next or previous label. 

 

Right now I have made a loop and al the animation are the same, but you can easily write every title by hand and exclude the first or last one from the timeline, so that the first title is already visible. Hope it helps and happy tweening! 

 

See the Pen MWqYyyQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[buruszur]

Thank you very much @mvaneijgen for the solution and for the great explanation of idea behind.