Horizontal with ScrollTrigger, Draggable - Dragging reverses sometimes

[Hargy 1 Likes (Newbie)]

Hi there,

 

This has been a few months in the making as Im pretty weak with JS and new to GSAP.  I bit off a bit more than I can chew as the client kept requesting different ways to navigate the page.  

 

So I have created a horizontal page with multiple ways to navigate :

• Drag
• ScrollTrigger
• Scrubber
• Links

 

Im pretty pleased to get to where I have, but I am finding that when using the drag I often find the page reversing from the direction I am trying to drag.  Im almost certain this is to do with lines 54 - 61 of the attached codepen javascript.  I think this isn't working and also when it is working that I probably need to be calling it from the different navigation methods that I have setup.

 

I had started to use this - updateProxy() - when I found something similar in this codepen:

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

 

But I cant find the original thread where it was pointed out and Im struggling to understand precisely what it is doing and how I should go about making it all work together.  

 

The only other big issue is whether or not Step 5 

 //STEP 5 - wait till all scroll updates have taken place and then correct the scrubber visually
  ScrollTrigger.addEventListener("scrollEnd", updateProgressBarCosmetic);

is the best way to update the scrollbar.  Its pretty clunky as it has to wait till everything finishes but I thought if I had it running while scrolling I would get into trouble with the scrubber getting into an infinite loop.  

 

I've tried not to waste the communities time by asking silly questions but I'm out of my depth on this one!

 

Any help would be hugely appreciated  

 

Many thanks,

Mike

See the Pen 2d6318d292d1c2b3b502ae8f92c18feb by mikeallteams (@mikeallteams) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey Mike. Connecting all of these modes of navigation is not the easiest task as you have found out  Using the scroll position as the "core" of all of your navigation as you're doing is the right way to go. 

 

Unfortunately debugging all of your functionality is a bit out of scope of what we're able to provide for free. There's definitely some logical issues going wrong here, probably related to how you're updating the scroll position on drag. You definitely need to make sure to overwrite any previous animations affecting the scroll position by using overwrite: 'auto' on the relevant tweens.

 

12 hours ago, Hargy said:

The only other big issue is whether or not Step 5 

 //STEP 5 - wait till all scroll updates have taken place and then correct the scrubber visually
  ScrollTrigger.addEventListener("scrollEnd", updateProgressBarCosmetic);

is the best way to update the scrollbar.  Its pretty clunky as it has to wait till everything finishes but I thought if I had it running while scrolling I would get into trouble with the scrubber getting into an infinite loop.  

What makes you think it will go into an infinite loop? The cosmetic state is not attached to the actual scroll position... You should be able to update the cosmetic state as often as you'd like.

[Hargy 1 Likes (Newbie)]

Hi @ZachSaucier I realised I never responded to this as I was away from work for a couple of days.  Many thanks for your answer and I appreciate its too big for a free forum! 

 

You are correct re the loop, I was over thinking it

 

Cheers,

 

Mike