Jump to content
Search Community

Control speed in scroll

Али К test
Moderator Tag

Recommended Posts

 

Hey @Ali Manuel

 

It's actually hard to say without having any clue about your HTML structure and your CSS.

 

But my guess would be, that the element you are pinning is not very high and thus your scrub is 'too fast'.

In a setup like this you could probably just change your end to a value you'd like, like 

 

end: '+=3000px'

 

for example and thus control the duration of the scrubbing tween ( which is the distance between the start and end ).

 

But that's just guessing.

 

If this doesn't work for you and you need a more thorough answer, it would really help, if you provided a complete example (with HTML and CSS) to have a look at and to work with.

 

Hope this helps, though.

 

Cheers,

Paul 

 

  • Like 3
Link to comment
Share on other sites

 

For one, you forgot to load the ScrollTrigger js-file, so in your codepen it wouldn't work in the first place

 

Another thing is, you are using toggleActions alongside scrubbing - which won't work together.

You should only use either one of them. Since you spoke about 'controlling the speed of the animation in scroll', I suppose scrubbing is what you want to do.

 

None of those elements, the tweens in your timeline refer to in the initial pen posted, are existant in your demo.

 

Since there are quite a few of them (and in the initially linked pen to they also have some pretty high durations set to them) this is likely what was causing to trigger your animation being too fast (alongside the duration of the scrub being defined like you did via start and end) - if the end goal here is to simply just scrub through that MacBoook-Animation. From what it looks like to me, you could simply just get rid of all those tweens on non-existant elements and probably also get rid of the scroll-eventListener and function attached to it.

 

I would highly recommend reading thorugh and trying to understand how durations work on ScrollTriggers with a scrub applied, because they work different from durations on regular timelines / tweens.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

 

 

I changed the end to "+=50000px" here to show you that now the animation indeed is 'slower'/taking a longer time to be scrubbed through.

 

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

 

 

 

 

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