Али К Posted January 25, 2021 Share Posted January 25, 2021 The animation work, but so fast, how i can control the duration or the speed for this scroll ? See the Pen gOwNEBE?editors=1010 by itsalimanuel (@itsalimanuel) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted January 25, 2021 Share Posted January 25, 2021 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 3 Link to comment Share on other sites More sharing options...
Али К Posted January 26, 2021 Author Share Posted January 26, 2021 @akapowl work but not good , See the Pen VwKqYqd?editors=1111 by itsalimanuel (@itsalimanuel) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted January 26, 2021 Share Posted January 26, 2021 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 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now