Jump to content
GreenSock

amort2000

gsap.from() and page width

Recommended Posts

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,
});

 

Link to comment
Share on other sites

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:

 

  • Like 2
Link to comment
Share on other sites

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; }

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×