Jump to content
Search Community

ScrollTrigger: Jump to animations

kuglix test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

  • Like 3
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...