Scrolltrigger with Draggable

[John Forex]

Dear GS-Team,

I'm a huge fan of your work, thank you so much! Currently I'm stuck on a small task and I'm wondering if you could help:

Please find attached the link to the codepen link. A horizontal scrolling scene with just one animation to keep things simple.

 

Now I tried to add drag-drop support to the scene by adding a fullpage draggable layer above the scene. I works as excepted (although I guess it could be saved in a way easier way) you're not able to interact with the website (links etc..). Also the scroll-position is currently not saved: If you scroll and drag the scene afterwards to position jumps.

 

I had a look at the docs, but nothing seemed to work. What am I missing here? And: Is there maybe a simpler solution to get this setup (horizontal scrolling + drag support) done?

 

Thanks in advance and keep up the great work!

John

See the Pen ZExddGb by thecre (@thecre) on CodePen

[Cassie]

Hi there!

 

Sorry you haven't got a response yet - I don't have time to dig into your pen right now (bedtime for me) but this thread should set you off on the right track until someone else jumps in.
 

 

[GreenSock]

Yeah, that's definitely a very customized kind of functionality which should be entirely doable, but we just don't have the resources to figure it all out for you and explain it. One option would be to use Observer to do a simpler Draggable implementation. Not as easy because you'd need to use Observer to listen for the pointer/touch events and then update the x/y values on the element yourself based on the Observer values, but it shouldn't be too hard. And this way you might be able to handle the links in a special way where you skip the drag logic or call preventDefault() on the event when necessary.

 

As for the jumping, yeah, you'll need to make sure you're synchronizing all the values so that doesn't happen. 

 

Good luck! 

[John Forex]

Hi!

Thanks for your reply!

No worries, that example works perfectly for me. I was looking for an easier set up anyways and will rebuild mine.

Thanks again and have a nice one!

John

[Cassie]

Glad we could help a little - it's a tricky one!