White spacing on bigger screen

[vamsi12]

i am working in webflow and i have created a scroll animation on 1440px screen it is looking fit but when increasing the screen size it gives a white spacing below the animation i have tried pin spacing false but it does n't gives smooth animation like pining effect and please review the code without styling  because i was working in webflow 

See the Pen xbZWXzW by Hima-Vamsi-Kummari (@Hima-Vamsi-Kummari) on CodePen.

[Rodrigo]

Hi,

 

With all due respect your setup is really odd IMHO. First I would strongly recommend to not pin an element with position: fixed and with set values for top and left. A fixed element is already take out of the document flow, so pinning it will most definitely have unexpected results, like in your demo when the content suddenly disappears for example. Also is worth noticing that your content element has a fixed height so in any screen with a height bigger than that will have extra white space after it. Also the natural height of the actual content of that section is around 480px, so basically you're facing the same outcome if the height of the screen is more than that.

 

So my first advice would be to remove the position fixed in order to avoid those jumps.

 

Then if you want to pin something whose height is less than the screen, the best alternative is to wrap that section and the next in a common ancestor and pin that ancestor, as shown in these demos:

See the Pen ZEVpqjb by GreenSock (@GreenSock) on CodePen.

 

See the Pen qBLRzVX by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!