Too much scrolling before animation starts

[gem]

Hello! I have created a timeline with Scrolltrigger. I want to make the animation start sooner. So as soon as the section gets pinned, the animation should start. It feels like after the element gets pinned, I have to scroll too much to get the Scrolltrigger to start (although it does feel worse on the live site). Any help is greatly appreciated. Thank you!!

See the Pen ZEmYNoK by bonfiremitch (@bonfiremitch) on CodePen

[GreenSock]

That's because you placed your first tween pretty far away from the start of the timeline. Your position parameter was "+=60%". But don't you want the first one to be butted up to the very start? You could do this for your position parameter: 

i ? '+=60%' : 0

You could simplify a lot of your code too by just using one timeline: 

See the Pen WNYbqdZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for? 

[gem]

Thanks Jack! That's exactly what I wanted and is very useful. I also want to ask if there's any way to do the same in between each tween. It feels like the same issue is happening where once a tween has finished, there is a lot of scroll needed to start the next tween. Thanks!

[GreenSock]

23 hours ago, gem said:

I also want to ask if there's any way to do the same in between each tween. It feels like the same issue is happening where once a tween has finished, there is a lot of scroll needed to start the next tween. Thanks!

Yeah, it's exactly the same issue. You're creating a gap when you do "+=60%". You could just reduce that to something like 10% or maybe even omit it altogether so that things butt up right next to each other. 

[RonaldBeal]

On 6/10/2023 at 12:14 AM, gem said:

Hello! I have created a timeline with Scrolltrigger. I want to make the animation start sooner. So as soon as the section gets pinned, the animation should start. It feels like after the element gets pinned, I have to scroll too much to get the Scrolltrigger to start (although it does feel worse on the live site). Any help is greatly appreciated. Thank you!!

Try adjusting the Scrolltrigger's trigger point or using a shorter duration to start the animation sooner. Students in colleges take note! Visit this https://valiantceo.com/effect-of-time-management-on-college-students/  eye-opening article to learn more about how time management affects your academic career. Learn helpful insights and useful advice for increasing your productivity and succeeding. Don't miss out on learning how to manage your time effectively!

Try adjusting the Scrolltrigger's trigger point or using a shorter duration to start the animation sooner.