ScrollMagic pin spacer слишком большой

Question

Я новичок в ScrollMagic, поэтому не уверен, есть ли что-то очевидное, что я пропускаю.

Я создал codepen, который иллюстрирует то, что я пытаюсь достичь, и alternative version, что почти делает то, что я хочу, за исключением того, что есть огромная разница, что я не могу избавиться.

По существу, у вас есть 3 слайда, которые сложены друг на друга. Когда пользователь прокручивает, слайды по очереди переходят вверх, чтобы открыть один снизу.

При прокрутке последнего слайда оставшееся содержимое страницы должно прокручиваться вверх, как если бы оно было прикреплено к нижней части финального слайда, а затем должно было функционировать как обычная страница.

В настоящее время контейнер со всеми слайдами в нем прозрачно перекрывает остальную часть содержимого тела, пока последний слайд не исчезнет с верхней части окна просмотра, и это ScrollMagic делает это.

Розовая полоса в кодефее предназначена для демонстрации того, где заканчивается нижняя часть контейнера для скольжения.

Вот соответствующий код:

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

Это разработано по умолчанию, чтобы остановить возлагали элементы перекрывающихся следующие элементы в документе.

Вы должны установить свойство 'pushFollowers' ложь:

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

См документации: 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}); 

Рабочий пример: https://codepen.io/alexgill/pen/MyOMKP (раздвоенный от вашего codepen)