Jump to content
GreenSock

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

Slight page height jump, can't get rid of it

Go to solution Solved by Rodrigo,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Here's the site where you can see it in action: http://siegfriedmedia.com

 

I've been trying a number of different combinations and can't find the right one to get rid of the slight page jump at the end of the 'yoyo' of the first three-line h1 that appears. After that the next three-line h1 and multiple line paragraph underneath it appear, and then the arrow appears. I don't think it's the arrow that is causing this, I think it is the paragraph with id=intro3 that is causing it? I'm not sure and I'd like to have the slight page jump not happen.

 

You won't see the page jump I'm talking about unless you slide the page up a little bit. It is not happening on mobile but on desktop it is. It matters because if you start scrolling the page before the entire intro has gone through its cycle and you're down the page a bit you will experience a small page height jump.

 

The codepen is the HTML, CSS, and JS that is in the site example.

See the Pen gpRLEo by benjino (@benjino) on CodePen

  • Like 2
Link to comment
Share on other sites

  • Solution

Hi Ben,

 

I can propose some solutions to this.

 

One is set the element's position to absolute and set the top/y property relative to the previous element's height and add a padding equal to the arrow's height. Like that the height is set considering that element (text) you won't experience the height jump.

 

Another solution is to set the overflow-y to hidden in desktops (that requires to check for desktops and change the overflow of the body and html tags via JS) and once the arrow animation is done, set the overflow-y to auto and allow scrolling using the onComplete callback.

 

I'm pretty sure that other guys around might have some great ideas, but this is mainly about JS code and CSS layout than a GSAP issue. Hopefully this helps.

 

Rodrigo.

  • Like 6
Link to comment
Share on other sites

Thanks Rodrigo. I worked it out with the the first option you suggested.

  • Like 1
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.
×