Slider System, Preventing scroll from first element if clicked

[ThomasDeer]

Hi Everyone, 

GSAP Newbie here, I'm attempting to build a bit of a slider in GSAP. I've used some trial and error, Documentation and codepen's to help get me to this stage. I'm trying to make it so that if somebody clicks on a school on the left. It will then scroll using gsap to the appropriate slide (which kind of works although very buggy)
However, If when you reach the slider element. you click say the last slide (Sixth Form) it carries you to the last slide on the right, as expected, Although if you then try and carry on scrolling from there, It attempts to scroll from the last scroll position on the page. I hope this explanation makes sense.

 

Can anybody offer some guidance or snippets for something that might solve my issue?

 

thanks, Tom 
 

See the Pen MWqqPEj by ItBeTommo (@ItBeTommo) on CodePen

[Rodrigo]

Hi @ThomasDeer and welcome to the GreenSock forums!

 

The main issue is how you're making your calculations to get the corresponding scroll position.

 

Is far better and more reliable to use ScrollTrigger start and end points in order to know exactly where to scroll. On top of that if you add labels to your timeline even better. You just add a label where each instance actually start and calculate the percentage of that label's time with the total duration of the timeline, which gives you the progress of the timeline at that point, and then factor that progress into the ScrollTrigger start and end points to tell GSAP where to scroll.

 

Here is a live example:

See the Pen oNPPmwq by GreenSock (@GreenSock) on CodePen

 

Now granted there is a magic number in there:

gsap.to(window, {
  scrollTo: {
    y:
    index == 0
    ? st.start
    : st.start +
    (st.end - st.start) *
    ((labelsArray[index] + 1) / timeline.totalDuration())
  },
  duration: 1
});

Right here: (labelsArray[index] + 1). That number is there because you're adding 0.5 seconds of dead time at the start and end of the timeline. So always keep in mind those offsets to estimate that particular number. Of course if it's 0.5 seconds you can store that in a constant and then just multiply that by 2.

 

Hopefully this helps.

Happy Tweening!