ScrollTrigger and using divs for the 'scroller'

[19357_1494126643]

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

[ZachSaucier]

Hey 19357_1494126643 and welcome to the GreenSock forums. Thanks for being a Business Green member!

 

The basics steps you need to take:

1. Make each container a fixed height (say 100vh) and have overflow: auto so that they can scroll.
2. Create a ScrollTrigger for each container and set the scroller to the container.
3. Apply the animation necessary to each container.

The way your demo currently animates the rotation of the texts, iterating through every single "box" on every single onUpdate, is doable but is not very optimal. I'd recommend positioning the "boxes" around a container element in 3D space and rotating the container. That way you just transform one element in each update (the container) and everything is where it should be. Of course you have a little less control over the animation (all of the boxes move uniformly) but it appears that what you're trying to do here.

See the Pen bGEEMxd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But in the end, do what makes sense in your head  That's more important granted the performance isn't terrible.

[GreenSock]

Here's a slightly tweaked version of Zach's demo that avoids the proxy objects and simplifies some of the calculations: 

See the Pen qBbbKBQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But like he said, it's more about whatever makes the most sense in your head.  

[19357_1494126643]

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!