Hargy

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

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

Perfect! 

Thank you so much Paul @akapowl , besides fixing my issue, your answer made some things click in my head about how GSAP works.  Im super excited to explore more! 

This forum is outstanding.  

Have a great day! 

Hi there,

I have been working on a horizontal scrolling page with ScrollTrigger.  Within this we want to be able to animate text headings as they come into view.  

In the pen there are 5 slides with Slide 2 and Slide 4 both with headers that we want to animate.  Ive nearly got it working but :

1. Slide 4 starts in its completed state and doesn't animate until it hits the Start point.  So it is sitting on the left and then it jumps to the from point and animates. 
2. I think Im doing it in a very inefficient way and that maybe the ScrollTrigger needs to be with the SplitText tween but I went down that path and got myself in a mess! 

Any assistance would be hugely appreciated! 

Cheers,

Mike

See the Pen YzqMWwz by mikeallteams (@mikeallteams) on CodePen