ScrollTrigger White Space Responsive

[_Moon]

Hey everyone!

 

I've started to use gsap recently and i'm in love with it!

 

Recently i ran into an issue that i can't seem to figure out and i'd like to know if there is anything i'm doing wrong.

 

The issue is as follows, i have two sections one that scroll vertically and while u scroll it starts to show elements coming from the top and bottom of the page, and another one who scrolls horizontally with sections.

 

It works almost perfectly on desktop sizes, but when i try to test it in either tablet sizes, or in an actual table device it errors out.

 

The animation on the first section stops working and it creates a huge white space on the bottom of it while the second one is way far down instead of almost "glued" to the other one and it just bugs out.

 

Website where this happens: http://gsap.sitedev.pt/

 

Recently i needed some help to pin a div and i used this example.

 

If you try in the dev tools and set it to an ipad you can understand what's going on.

 

The thing is in the codepen attached to this post, it works perfectly where you have to scrolltriggers divs and they both work perfectly on any sizes, but when i replicate that exact same code to anywhere (my wordpress installation, normal HTML,etc).  I'll also attach screenshots of the bug in the table sizes!

 

The code in my  codepen is the exact same as in the website.

 

I know it's a bit hard to figure out but i'd love some help since i can't seem to figure out this issue!

 

See the Pen bGWmday by ttmino (@ttmino) on CodePen

[akapowl]

 

Try setting overflow-x: hidden on the .container-test, that already fixed it for me. Does it work for you, too?

 

.container-test {
  overflow-x: hidden;
}