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!