[ScrollTrigger and using divs for the 'scroller']

Much appreciated folks. The advice makes perfect sense, and is more what I would do in a 3D environment. This is why I love this place. I'll go back and retool this more toward what you are showing me and post the results when its something more of a plugin. I owe you, domo arriagato gozai mas Senors!

[ScrollTrigger and using divs for the 'scroller']

Hi folks, I want to use ScrollTrigger for a UI component on a mini-site but I can't come up with the best way to toggle the scroll control between elements, if thats even possible. I understand that the typical use cases is to sequence animations/events to the scrollbar for the page itself, but in this case I am trying to use that as the interface for spinning through some items in a list i.e. on s per container basis instead of the whole page. 

 

I've brute forced several combinations but cant find one that works well. The codepen I included is sourced from another developer who had the initial idea I forked from and I have restored it to a point where the basic interaction can be seen. What Im trying to change is make it so 2 of those can be on a page at the same time and use JS to toggle which of the two receives the updates. 

 

I saw the "scroller" property in the documentation but there must be something about the relationship of the trigger to the scroller element that im not grok'ing because all the ways I try to combine them i either end up with no scrolling or back to scrolling from the viewport. I was able to get one version to run with 2 on the page  but they both update together because both instances react to the triggers. So something like that works if i can just disable one or the oither without having to rebuild the whole thing or lose the state of the animation by doing .disable().

 

Any assistance would be helpful.

 

Thanks!

See the Pen BajjKMw by jjustian (@jjustian) on CodePen