Jump to content
Search Community

Replace active ScrollTrigger

Skadi2k3 test
Moderator Tag

Recommended Posts

Hey, thanks for making ScrollTrigger!

 

One of the demos on the ScrollTrigger documentation page had different scrub values. Since I can't update the scrub value directly I was trying to replace the entire active ScrollTrigger, but that applied a tween of the start state till the current ScrollTrigger position on update. Is there a sensible way to replace the active ScrollTrigger with another one, without tweening from the start? I can see that there is a certain complexity to that, especially when you have a timeline hooked up.

 

The tweens of the killed ScrollTrigger instance should keep their state and scrub to the state of the next ScrollTrigger instance with the new scrub value :-)

 

Animation of the pen should be: scrolling down -> lower discs move first and upper disc drag behind, scrolling up -> upper discs move first and lower discs drag behind.

See the Pen MWKOqJN by Skadi2k3 (@Skadi2k3) on CodePen

Link to comment
Share on other sites

Hey Skadi2k3 and welcome to the GreenSock forums!

 

Doing this sort of thing is... tricky. 

 

Theoretically you could kill off the previous ScrollTrigger and create a new one with different values and, so long as the scroll position of the page is the same, they could switch out interchangeably (which you can see is true in your demo if you set all the scrub values to true). However, with scrub values other than true (which stays perfectly synced with the scroll position) there is bound to be some sort of jump if the scrub animation has not completed yet. Does that make sense?

 

What might be a better approach is creating your own tweens that go towards a target value every tick. You'd have two sets of values: the actual rendered values (the rotation, x position, y position, whatever), and the target values that you ease to over time (those same values but whatever those values would be if scrub: true were set in your current demo). It's the sort of thing we do in the mouse follower demo on the .quickSetter docs page. The main difference is that instead of using a mouse position as the target value, you'd use the values of a tween at a given progress value. It will take some playing around to get things set up correctly but based on the quality of code in your demo I think you have the competence to get it done :) We're also happy to answer any questions that you have.

  • Like 2
Link to comment
Share on other sites

Thanks Zach. I used the onUpdate method and tweens per tick with overwrite. I initially used the same values for duration that I had used for the scrub, which should then theoretically take the same amount of time (without a performance drawback and infinite ticks per second). I had to change the values a bit because it got a bit slower after all, i think. But maybe that's just subjective because of the blinking before. :-)

 

See the Pen RwrjqWP?editors=0010 by Skadi2k3 (@Skadi2k3) on CodePen

  • Like 1
Link to comment
Share on other sites

10 minutes ago, Skadi2k3 said:

I initially used the same values for duration that I had used for the scrub, which should then theoretically take the same amount of time (without a performance drawback and infinite ticks per second). I had to change the values a bit because it got a bit slower after all, i think. But maybe that's just subjective because of the blinking before. :-)

That's probably because of the easing applied. You could modify your onUpdate to apply some easing if you wanted to :) 

 

We'd love to have you hang around the forums! We're always looking to have more people, especially skilled developers.

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