scrolltrigger ScrollTrigger Horizational Scroll last panel not stopping and going beyond the screen

[Fumiho]

Hello everyone,

 

I'm new to GSAP and I'm having trouble with the scroll trigger. In the last "Hello", as you can see in the demo, it is scrolling out of view. But I want to let it stay in the screen. But I just couldn't make it work. If anyone can help me I much appreciate.

 

Thanks!

See the Pen rNbKMmY by Cams1712 (@Cams1712) on CodePen

[mvaneijgen]

Hi @Fumiho welcome to the forum! 

 

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. 

 

You have four "hello" blocks and you want them to move off screen, but have the last one stay. Your logic right now is move them all 100% of their width times the number of .project elements, this is what it is doing now, but your logic is they should all do that expect for the last one, so just subtracted one from your calculations. This is why removing ScrollTrigger is such a powerful move, now you can check just the animation if it is doing what you expect it to do and don't have to worry about what is causing your issue. 

 

What could be even more powerful when debugging is changing out projects.length for a hard coded value eg just try the hard coded value of "4" and see what that does, then try "3" and see what that does, this always helps me. Getting dynamic values is great for final code, but before you can get there you first have to know what it is you're trying to do and trying hard coded values probably results in you finding your own solutions. A few weeks back I've written the following post with a philosophy that really helps me debug any project I'm working on, give it a read. Hope it helps and happy tweening! 

 

 

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

[AlbertaElder]

On 4/11/2024 at 6:45 PM, mvaneijgen said:

Hi @Fumiho welcome to the forum! 

 

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. 

 

You have four "hello" blocks and you want them to move off screen, but have the last one stay. Your logic right now is move them all 100% of their width times the number of .project elements, this is what it is doing now, but your logic is they should all do that expect for the last one, so just subtracted one from your calculations. This is why removing ScrollTrigger is such a powerful move, now you can check just the animation if it is doing what you expect it to do and don't have to worry about what is causing your issue. 

 

What could be even more powerful when debugging is changing out projects.length for a hard coded value eg just try the hard coded value of "4" and see what that does, then try "3" and see what that does, this always helps me. Getting dynamic values is great for final code, but before you can get there you first have to know what it is you're trying to do and trying hard coded values probably results in you finding your own solutions. A few weeks back I've written the following post with a philosophy that really helps me debug any project I'm working on, give it a read. Hope it helps and happy tweening! 

 

 

 

 I've been dealing with the same issue recently, and I completely understand your frustration. It's incredibly frustrating when the last panel keeps scrolling beyond the screen, disrupting the entire layout. From my experience, adjusting the scroll distance and ensuring accurate calculations for the scroll animation can help resolve this issue. Hate it when you play the game and some trouble-shooting happens! That's why I often read Donbet casino review https://notgamstop.com/casino-reviews/donbet/ to choose the best option without troubles. Donbet Casino, an independent online gambling platform under the Santeda Group, offers classic casino games, mini-games, and sports betting without Gamstop limitations, all licensed under a Curacao license.

Thank you sir for answering.