Vertical scrolling working too quickly

[kjs23]

Hello

I'm sure this is a simple fix but I can't find the right way to describe it in a short, concise manner. What I am trying to achieve is this; for the sake of argument I will say my page is 3000px long and I want 2 different animations on it, one moving from left to right, the other top to bottom. The aim is to get them to meet in the bottom right hand corner when you have scrolled to the end of the page. But, as you can see from my demo, the red box is falling off the screen way too early. Is there a way to set it so that when I have scrolled down 1500px, i.e. 50% of the height of the div, that the red box can be halfway down the screen?

TIA.

See the Pen MWzKqoX by kjs-fgx (@kjs-fgx) on CodePen

[mvaneijgen]

Hi @kjs23 welcome to the forum! 

 

Thanks for the demo that was really insight full! I have a few pointers that I like to share. You rarely need more than one ScrollTrigger to get the desired result. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Where GSAPs power lies is in its ability to create timelines that are easy to manage and re arrange, single tweens are great, but personally I always start with a timeline, because an animation hardly is just one movement. It's best when you want to have fixed elements with ScrollTrigger use the pin feature to let ScrollTrigger handle everything. I've put some comments in my pen to better explain certain parts of the code, so please read trough them and post back if you have any questions. 

 

So here is the pen how I would build it and where I first focus on just  the animation.

See the Pen zYMrMEE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Then you enable ScrollTrigger again and you can go tweak from there. Hope it helps and happy tweening! 

See the Pen gOQPQxJ?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[kjs23]

Thank you so much @mvaneijgen , I really appreciate that not only did you solve my problem, but that you took the time to suggest how to make my code more efficient as well. The comments in the code were really helpful too, explaining why something is being done goes a long way to providing a better understanding of the logic behind GSAP.