ScrollMagic spacer spacer trop grand

Question

Je suis nouveau à ScrollMagic donc je ne sais pas s'il y a quelque chose d'évident que je néglige.

J'ai mis en place un codepen qui illustre ce que je suis en train de réaliser, et un alternative version qui presque fait ce que je veux, sauf qu'il ya un fossé énorme que je ne peux pas sembler se débarrasser. Essentiellement, chercher à avoir 3 diapositives qui sont empilés les uns sur les autres.

Lorsque l'utilisateur fait défiler, les diapositives passent une par une pour révéler celle en dessous.

Lorsque vous faites défiler la dernière diapositive, le contenu restant sur la page doit défiler vers le haut comme s'il était attaché au bas de la diapositive finale, et devrait dès lors fonctionner comme une page normale.

Actuellement, le conteneur contenant toutes les diapositives recouvre de manière transparente le reste du contenu du corps jusqu'à ce que la dernière diapositive disparaisse du haut de la fenêtre, et c'est ScrollMagic qui le fait.

La barre rose du codepen est destinée à indiquer où se termine le fond du tiroir.

Voici le code correspondant:

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

Ceci est conçu par défaut pour arrêter les éléments épinglés chevauchant les éléments suivants dans le document.

Vous devez définir la propriété 'pushFollowers' false:

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

Voir la 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}); 

Exemple de travail: https://codepen.io/alexgill/pen/MyOMKP (en forme de fourche de votre codepen)