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:
https://codepen.io/GreenSock/pen/WNxRKae?editors=0010
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