How to manually delete whitespace at bottom of page

Question

https://demo.joinspheres.com

I'm working on a demo scroll animation website and to get it to work the way I want (each animation happens immediately after the next), a ton of whitespace is added to the bottom of the page.

The main issue is that I have to add style="top:-100vh;" to each "slide" to make the animation immediate, but it doubles their sizes.

Is there a way to manually tell the browser where to stop the page? Or a better way to setup the scroll animations? Wouldn't be asking here if I had something else to try.

Here's stripped code that illustrates the problem: https://github.com/con266667/spheres-demo/tree/whitespace-issue

I'm using ScrollMagic, but I wrote my own js wrapper.

Thanks in advance

Answer 1

This may do the trick. Add the following code to your <script> section. Don't forget to change the variable amountOfPages if you add more scroll-pages.

What is does: it takes the height of the client (which can display one scroll page at the time) and multiply this by the amount of scroll-pages you have, then it sets the height of the page to this fixed number.

function resizeBodyHeight() {
  let amountOfPages = 9;
  document.body.style.height =  window.innerHeight*(amountOfPages + 1)  + "px";
}

window.addEventListener('resize', resizeBodyHeight);
window.addEventListener('load', resizeBodyHeight);

EDIT: You can replace the line let amountOfPages = 9; with the following line. This will let JavaScript determine the amount of scroll-page itself.

let amountOfPages = document.getElementsByClassName("scrollmagic-pin-spacer").length;

Answer 2

The solution that worked was to make the pages fixed and then set the ScrollMagic trigger to a new element, whose height becomes the height of the entire page (since all other elements are fixed). This way I can easily change the page height.

I also put all the animations on the same timeline.