Jump to content
Search Community

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

goooon test
Moderator Tag

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

  • goooon changed the title to play to a "label" in a scrubbed timeline, and update de scroll position

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

 

  • Like 6
Link to comment
Share on other sites

  • 2 years later...
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 🫠

 

  • Like 2
Link to comment
Share on other sites

  • 4 weeks later...

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...