gsap.from() and page width

[amort2000]

Hi,

 

I'm sliding panels in from outside the viewport using gsap.from() and my layout is taking up 100% of the browser window.

When I side a panel in from the right it increases the width of the page, however the page width remains the same when slid in from the left.

 

I'd like the panels to slide in without increasing the width of the page?

 

What am I missing? Code pasted below:

 

Thanks!

 

let window_current_width = window.innerWidth;

 

// left side works fine

gsap.from("#home-latest-dev .wp-block-media-text__media", {

scrollTrigger: "#home-latest-dev",

x: -window_current_width,

duration:2,

ease:"sine",

opacity:1,

});

 

// right side increases width of window, which is causing problems

gsap.from("#home-latest-dev .wp-block-media-text__content", {

scrollTrigger: "#home-latest-dev",

x: +window_current_width,

duration:2,

ease:"sine",

opacity:1,

});

 

[ZachSaucier]

Hey amort2000. This is a CSS issue actually. You should hide the overflow of the container of the element you're animating (.wp-block-media-text__content). Maybe this would work?

#home-latest-dev {
  overflow: hidden;
}

It's impossible to say for sure without a minimal demo. For info on how to create that see this post:

 

[amort2000]

That was the perfect answer - thanks Zach!

[Visual-Q]

Though it affects the whole page so it's not always desirable, you can also put a global reset on the body, to prevent horizontal scrolling. 

 

body { overflow-x: hidden; }