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

[benjino]

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

[Rodrigo]

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.

[benjino]

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