ScrollMagic pin spacer too large

Question

I'm new to ScrollMagic so not sure if there's something obvious that I'm overlooking.

I've set up a codepen which illustrates what I'm trying to achieve, and an alternative version that almost does what I want, except there's a huge gap that I can't seem to get rid of.

Essentially looking to have 3 slides that are stacked on top of each other. When the user scrolls, the slides one-by-one transition up to reveal the one underneath.

When scrolling past the final slide, the remaining content on the page should scroll up as if it's attached to the bottom of the final slide, and should from then on function like a normal page.

Currently, the container with all the slides in it transparently overlaps the rest of the body content until the final slide has disappeared off the top of the viewport, and it's ScrollMagic that is doing this.

The pink bar in the codepen is intended to show where the bottom of the slide container finishes.

Here's the relevant code:

function initController() {
    controller = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: "onLeave"
        }
    });

    controller.scrollTo(function(pos) {
        TweenMax.to(window, 1, {
            scrollTo: {
                y: pos,
                autoKill: true
            }
        });
    });
}

function initAnimation() {
    wipeAnimation = new TimelineMax();

    $.each(ui.slides, function(i, slide) {
        wipeAnimation
            .add(TweenMax.to(slide, 2000, {y: '0'}))
            .add(TweenMax.fromTo(slide, 5000, {y: '0'}, {
                y: '-100%',
                onComplete: function() {
                    if (i < ui.slideCount - 1) { // don't run on last slide
                        updateActiveSlide(ui.slides[i + 1]); // activate next slide
                    }
                },
                onReverseComplete: function() {
                    updateActiveSlide(slide);
                }
            }));
    });
}

function initScene() {
    scene = new ScrollMagic.Scene({
        triggerElement: ui.el,
        duration: '100%'
    })
    .setTween(wipeAnimation)
    .setPin(ui.el, {
        pushFollowers: false
    })
    .addTo(controller);
}

Answer 1

This is designed by default to stop the pinned elements overlapping the following elements in the document.

You need set the 'pushFollowers' property to false:

function initScene() {
    scene = new ScrollMagic.Scene({
        triggerElement: ui.el,
        duration: '100%'
    })
    .setTween(wipeAnimation)
    .setPin(ui.el, {
        pushFollowers: false
    })
    .addTo(controller);
}

See documentation: http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.Scene.html#setPin

// pin element and push all following elements down by the amount of the pin duration.
scene.setPin("#pin");

// pin element and keeping all following elements in their place. The pinned element will move past them.
scene.setPin("#pin", {pushFollowers: false});

Working example: https://codepen.io/alexgill/pen/MyOMKP (forked from your codepen)