ScrollTrigger: Jump to animations

[kuglix]

Hello everyone, I hope this is a simple question: Is it possible to jump/scroll to animations that are linked to ScrollTrigger (scrubbed)?

With ScrollTrigger.scroll() I can't use timeline labels (like with Timeline.tweenTo()), ScrollToPlugin doesn't work either.

 

Any ideas?

[ZachSaucier]

Hey kuglix. What do you mean "jump/scroll to animations"? ScrollTrigger bases everything off of the scroll position of the page...

 

ScrollTrigger also works great with ScrollToPlugin:

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

 

Please create a minimal demo of your issue if you'd like our help  

 

[kuglix]

@ZachSaucier: I have inserted it in this Pen:

See the Pen WNrJJRj by kuglix (@kuglix) on CodePen

 

It should work like button B4, but with the correct scroll position 🤔

[ZachSaucier]

There are a couple of things going wrong in that pen.

• You're attempting to use a tweenTo on a timeline controlled by a ScrollTrigger every time someone clicks... That doesn't make that much sense.
• You're immediately setting the scroll position for the button.scrolltrigger element. It won't animate if you're using that approach.

Why not just use the original approach in the demo that I linked? Why do you need these other attempts at methods? What's your end goal?

[kuglix]

Buttons B1 to B3 were only tests, it should be like B4 to scroll to an animation position.

 

The goal is that I can click a button and jump to different animation sections on the timeline (not every single animation, e.g. scroll until the heading is flown in and introtext is visible). This should be an alternative way of viewing a scroll-linked animation (client request ...).

 

Thank you for your efforts so far!

[ZachSaucier]

I see. So you are wanting to scroll to a certain point in a scrubbed ScrollTrigger animation. Using your approach, the position would be off after the link click. 

 

You just have to calculate the position of that label in the Scroll Trigger's offset:

gsap.utils.toArray("nav button.scrollto").forEach(function(a) {
  a.addEventListener("click", function(e) {
    const percent = tl.labels[e.target.getAttribute("data-jump")] / tl.totalDuration();
    const scrollPos = myST.start + (myST.end - myST.start) * percent;
    gsap.to(window, {duration: 1, scrollTo: scrollPos});
  });
});

See the Pen eYJrQEg?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Note that I removed the click events for buttons 1-3.

[kuglix]

That's it! Thank you for your help