Draggable/rotating dial to control slider + ScrollTrigger on menu items

[Ross Symons]

Hi there,

I have been sitting on this problem for about 2 days without any luck, so I thought I'd reach out to the pro's

 

I am creating a menu which is controlled by a dial on the left. I have managed to get the dial to control the continuous cycling of the menu items on the right. What I want to do is to animate each menu item separately (rotate, scale up etc), when it hits the centre of the bordered div. This will show which menu item is active. I've attached a screenshot of what I am trying to achieve visually.

 

For some reason I cannot get ScrollTrigger to fire when it hits the designated scroller. 

 

Any help would be appreciated.

Thanks!

See the Pen vYKwvVv by RossSymons (@RossSymons) on CodePen

[ZachSaucier]

Hey Ross and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

If you look in your developer tools console you'll see a bunch of warnings about the scrollTrigger property being set to an invalid value. That's because you're not loading ScrollTrigger but trying to use it  

 

But I'm a bit confused - why are you trying to use ScrollTrigger at all? As far as I'm understanding it you want the scale and such to be based on the rotation of the dial, right? So that has nothing to do with scrolling? I might try creating a timeline that controls the scaling of all of your elements and then affect its progress in the onUpdate of the Draggable based on the rotation angle of the Draggable.

[Ross Symons]

Thanks for the reply @ZachSaucier.

 

I did load the ScrollTrigger plugin and it's still not working. So I will need to try your other solution.

 

My thinking is that the list of "projects" would need to be scrollable and also draggable. ScrollTrigger allows you to perform an action based on where the scroller element is so this is why I wanted to use it. But it's not cycling through the list items.

 

Not sure how I would implement your solution but logically it looks like it could work. So I will give it a try.

 

If you do have an example of something similar that would be a great help. 

 

Thanks.

[ZachSaucier]

8 hours ago, Ross Symons said:

My thinking is that the list of "projects" would need to be scrollable and also draggable. ScrollTrigger allows you to perform an action based on where the scroller element is so this is why I wanted to use it.

If that's true what you should do instead is make everything based on the scroll position. Create a timeline that does the rotation and scaling that you want. Attach that to a ScrollTrigger and get it working. Then create a Draggable that affects the scroll position of the page. 

 

A similar approach is used in this thread about horizontal scrolling Draggable with ScrollTrigger but the concept is the same:

 

[Ross Symons]

Thanks @ZachSaucier

I will see if I can get your approach to work.