Scroll to label with ScrollTrigger

[kobro]

Hi. I have the structure where all the elements are in "position: fixed" and animate them with ScrollTrigger.
My problem is when I want to play animation to label or position in timeline on click. Timeline plays, but page scroll does not move.

 

I thought to try to calculate scroll position but all elements are fixed so it doesn’t work.
Is there any possibility to create timeline that doesn’t depend on scroll page but plays on scroll? Or something that will scroll and play at the same time?

 

Press button "Go to BLUE" and scroll after animation stop.

See the Pen MWoNoWZ by KoBro (@KoBro) on CodePen

[akapowl]

Hey @kobro

 

If you want the scroll-position and tween to stay connected, it's best to just use the ScrollTo-Plugin, which you are already loading.

 

In your case you could e.g. slap an ID onto the container you are using as the trigger (which in your example is .hero - but there is no such element in your markup, so I changed that to  your .scroll-wrapper container), tell the ScrollTo-Plugin to scroll to there and add a negative offset-y representing the actual scroll-duration of your ScrollTrigger. Something like this maybe:

 

See the Pen fb808f83f02f26987887df876c22ceeb by akapowl (@akapowl) on CodePen

 

 

[Method Zero]

On 10/6/2021 at 10:58 PM, akapowl said:

Hey @kobro

Thanks for your answer. Maybe I have explained wrong. Is there a Scroll to label mode like snap to label in scroll trigger option, but on click?

?

 

 

In your example scroll reaches the end and ignores labels. Or did I misunderstand and your solution has a way to configure scroll position? 
Here is an example with more scroll timeline animations.

See the Pen gOxGBag by KoBro (@KoBro) on CodePen

 

In real project I have a lot of animations on scroll and I need to have a scroll on click option.

[akapowl]

 

I could be totally mistaken, but I don't think there is such an option.

 

You could create a re-usable function of your own though, without too much effort.

 

Something like this maybe - it is not 100% bulletproof (e.g. if in a scenario like yours, you'd have two scrubbing timelines triggering in different spots with regard to the same trigger-element, it wouldn't work) but it works decently enough...

 

See the Pen 2cbbb02d6fd8294091d64e2573ce0064 by akapowl (@akapowl) on CodePen

 

 

...even in scenarios where things wouldn't be positioned fixed/absolute but in a 'natural' flow with pins. Maybe that'll help you.

 

See the Pen 615aeef95a8994782328ab0edb2284a3 by akapowl (@akapowl) on CodePen

 

[GreenSock]

Here's a helper function that'll let you feed in a timeline and label, and then it'll return the associated scroll position (assuming that timeline has a ScrollTrigger attached): 

function labelToScroll(timeline, label) {
  let st = timeline.scrollTrigger;
  return st.start + (st.end - st.start) * (timeline.labels[label] / timeline.duration());
}

And here's a fork of your demo with it working (assuming I understood your goal correctly):

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

 

Does that help? 

[Method Zero]

19 hours ago, akapowl said:

 

5 hours ago, GreenSock said:

Does that help? 

Thank you so much guys. It's really what I needed and completely solved my problem.

[Ninthony]

Is there a way to do this without the SmoothScroller? 

[Ninthony]

Scratch that, I needed to include the ScrollTo library in my code, didn't realize it wasn't a part of ScrollTrigger itself.

[Rodrigo]

Hi @Ninthony,

 

What exactly you mean by that? The ScrollSmoother Plugin is not actually being used in the latest example Jack added to the thread.

 

The example uses the ScrollTo Plugin in order to animate the scroll position of the window object to the specific scroll position returned by the method used for that. The other thing that could lead you to think that is the fact that the ScrollTrigger configuration uses scrub: 1. This is what the ScrollTrigger docs say about that:

 

scrub

Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following

• Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress.
• Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.

 

Maybe if you change it to scrub: true you'll get the effect you're looking for. If not please provide a minimal demo that clearly illustrates the issue you're having.

 

Hopefully this helps.

Happy Tweening!