Jump to content
GreenSock

mjray

Is it possible to scroll to a timeline label with GSAP Timeline and ScrollTrigger?

Go to solution Solved by mjray,

Recommended Posts

Hey All - 

 

I've been combing through forums for a while but haven't found a way to do this. Is it possible to scroll to a timeline label with GSAP Timeline and ScrollTrigger and the ScrollTo plugin? The way I have my animations setup are as fixed position elements all on top of each other and the ScrollTo plugin doesn't seem to work with this setup. I'm hoping I can find a way to scrollto labels in the timeline as a solution.

 

Thanks so much,

 

MJ

Link to comment
Share on other sites

  • mjray changed the title to Is it possible to scroll to a timeline label with GSAP Timeline and ScrollTrigger?
  • Solution

Alright was able to figure it out! The big issue for me was that I was using different durations in the gsap.to function which was causing all sorts of weird issues - I assumed the duration was the duration of scrolling time but it looks like it changes the scroll position value so it must work differently - not sure why but setting it to 1 does the trick.

 

$('.nav-link').click(function() {
    var st = timeline.scrollTrigger;
    var pos = st.start + (st.end - st.start) * (timeline.labels['section'] / timeline.duration());
    gsap.to(window, {scrollTo: pos, duration: 1});
});

Link to comment
Share on other sites

I didn't totally follow your explanation there, @mjray, but my guess is that you were creating conflicting tweens. Did you try simply setting overwrite: true or overwrite: "auto" on your animation? 

 

Also, did you know about this method?: 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()

 

It's relatively new.  :)

  • 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.
×