ScrollTrigger with Sticky Element

[Tony Geek]

Hi all,

I'm trying to create a horizontal scroll trigger where the element above stays stuck to the top whilst scrolling, but I'm not seeming to get anywhere with producing this. When I try and attach the scrolltrigger to the container, something about it breaks and the horizontal scroll no-longer applies to my list of elements. I've produced a codepen showing what the horizontal animation is, as well as some text above I would like to be pinned to the view. I've also done a little diagram, if that helps anyone at all 😂

Any questions please ask, I have had a poke around the forums to try and find any question like this, but haven't seemed to find any so if you do know of any solutions, feel free to point me in the right direction!

See the Pen mdQvPVy by tonycre8-the-bold (@tonycre8-the-bold) on CodePen

[mvaneijgen]

Changed trigger from #team-members to .vertical-scroll-container and than it works as you want right?

 

See the Pen bGQzgGL?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Tony Geek]

1 hour ago, mvaneijgen said:

Changed trigger from #team-members to .vertical-scroll-container and than it works as you want right?

 

 

 

Looks like it. I've got a similar setup on a website I'm working on at the moment. And for some reason, this sort of solution doesn't work. The entire animation seems to break. I guess I'll have to look into it a bit more. It hasn't solved my problem but it's solved a problem for someone else potentially, so I'll mark it as the answer.