play to a "label" in a scrubbed timeline, and update de scroll position

[goooon]

Hello everyone, I have a serious problem that I can't solve.

I need to add buttons to my animation to go back to markers in time. But as my animation is scrolltriggered with scrub:true , when I play the timeline to the labeled time, I get an offset between the animation and the scroll position.

 

Is it possible to solve it?

Thank you very much

 

 

See the Pen JjWXQGG by Gon82 (@Gon82) on CodePen.

[akapowl]

Hye @goooon

 

If you want the scroll-animation to be played on that click AND the scroll-position to be updated you should best just auto-scroll to the position you want - you can use GSAP's scrollTo-Plugin for that.

 

What I would recommend is not making the duration of your ScrollTrigger dependent on some height (which you do by setting the end to '+=600%') but making it dependend on width instead - maybe something like end: "+=" + (window.innerWidth*6) because that will make it way easier for you to get the right position to scrollTo.

 

Here is how you could do it

 

See the Pen 2ea2065e369bf69eeb2052009daf836a by akapowl (@akapowl) on CodePen.

 

 

Edit:

I guess I was not thinking straight there, so I gotta correct myself a bit here.

Of course you could also leave it at end: '+=600%' and just use the window's innerHeight as a base for the scrollTo-tween.

 

See the Pen fdcd7176fe8bf3c03b9dd253bcdbdff7 by akapowl (@akapowl) on CodePen.

 

[goooon]

@akapowl

Thank you so much for helping me so much!

[Ritik]

@Cassie why did @akapowl add

.addPause()

isn't the timeline defined to scrub?

[akapowl]

6 hours ago, Ritik said:

@Cassie why did @akapowl add

 

@Cassie

I didn't.

 

It was in @goooon's example already when I forked it.

 

 

So if you're interested in why they did that, It would probably be best to ask them.

Maybe it was just for the sake of testing the animation without ScrollTrigger hooked up to it.

Because, yes, since the animation is being scrubbed by ScrollTrigger, the addPause() doesn't actually do much ?

 

[goooon]

On 10/25/2023 at 4:59 AM, Ritik said:

@Cassie why did @akapowl add

.addPause()

isn't the timeline defined to scrub?

@Ritik

I added a pause because, in my first approximation the button plays the timeline. without the pause it would continue to the end.

function(){
  TL.play('SECTION_1');
});