Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
wobwobwob

SmoothScroll cuts off end of page on resize

Recommended Posts

Hi,

I am using a official GreenSock script found on Codepen (link), to implement SmoothScroll with the native ScrollTrigger .

 

Everything works perfect, but when I for example go from Portrait to Landscape the ending of the screen is not visible anymore. I discovered the height of the body is changed correctly, but the transform that pushes the content up is lower. Below an example:

1. When I load the page in Horizontal mode, the Y at the end of the page is: 1486
2. When I load the page in Portrait mode and than switch to Landscape, the Y at the end of the page is: 1189.

My first guess was this was caused by content that does not instantly takes shape due to transitions and such, but this is not the case. Even on a normal text page, the problem exists.

I analysed the script and it looks like it's resizing as it should, could you help me pinpoint to what could be the problem?

Kind regards,

 

Tom

 

Screenshot 2021-10-21 at 14.56.59.png

See the Pen gOgWELo by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Welcome to the forums @wobwobwob

 

I'm not noticing that problem in the demo you posted. How can I reproduce the issue?

  • Like 1
Link to comment
Share on other sites

Hi,

 

True, the demo works perfect!

I found out more about the problem. The code does not seem to work well with some other GSAP animations. I am pinning a section that is 100vh and if I resize from portrait to landscape, the height of the body is one screen height shorter. I guess during resize GSAP does not detect the section having any height. When I disable this section, everything works fine.

I tried to replicate the issue in a Codepen. I managed to write a code where the page breaks, when switching landscape mode (

See the Pen vYJyjzz by tomraas (@tomraas) on CodePen

). Instead of making the page too short, the codepen somehow makes it longer...

Do you know a solution to fix this?

Kind regards,

Tom Raas

Link to comment
Share on other sites

Thanks for the demo! We'll look into this.

Link to comment
Share on other sites

Hey @wobwobwob

 

Would you mind checking this out? The demo in the docs has also been updated with these changes.

 

See the Pen mdMOgEx by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Hi,

 

Looks like that works, thanks a lot for helping out!

Kind regards, 

Tom

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.
×