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

[mjray]

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

[mjray]

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});
});

[GreenSock]

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.  

[mjray]

Thanks @GreenSock I'll check that out!