Jump to content
Search Community

Slider System, Preventing scroll from first element if clicked

ThomasDeer test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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: {
    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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...