Horizontal Scroll Issue | Text Not Visible Under the horizontal section.

[ShahG007]

Hi there, I hope you are doing well. I am new to gsap . I am facing issues in creating horizontal scroll effect. The problem is that the last panel in the section is not covering the whole width of the screen and there is also some text below it which is not visible. Can you please help me out to resolve this issue. Thanks.

See the Pen MWxrjKo?editors=1010 by Syed-Azhar-Hussain-Shah (@Syed-Azhar-Hussain-Shah) on CodePen

[mvaneijgen]

Hi @ShahG007 welcome to the forum!

 

You have your markers on and it might be hard to see due to the colors, but the issue is your end trigger never meet because there is not enough scroll space left, so it will just hang at the bottom of the screen. 

 

It is not necessary, but I always like to split my ScrollTrigger and tween separate from each other and I always like to start with a timeline, so much more versatile than just a tween, so lets debbug your demo!

 

If I disable ScrollTrigger everything seems fine, so your animation is perfect! 

 

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

 

If we just give it some extra scroll space what will happen? Seems fine, but now suddenly the section disappears!

 

See the Pen YzgYrRZ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

That is because you should never animate your trigger element, so what gets animated and what ScrollTrigger uses as the trigger can never be the same element! See here I've changed your trigger to .hor_section and everything works!

 

See the Pen PoLEJXQ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

Ok, now it works, but what if we don't want any space underneath everything. You have a start trigger, which places the triggers at the top of the element and at the top of the browser. And then your end trigger where you do +=amountToScroll, but you don't set a viewport trigger, so ScrollTrigger will set the default which is top.

 

Personally when starting out I like to be explicit and just define all the values even if they are already the default, this will just make it easier to read and see what values I could change when I need to.

 

I've set it to `top+=${amountToScroll} bottom`, and put it in template literals to make it easier to read. So this tells ScrollTrigger, end when the top of the element (+ amountToScroll) hit s the bottom of the page and now everything is done! Hope it helps and happy tweening! 

 

See the Pen rNRpGRB?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen

[ShahG007]

@

• mvaneijgen You are awesome !

Thanks a lot for your time and easy to follow explanation. It has helped me a lot to understand the gsap scroll trigger better.