在发生动画时暂停ScrollMagic，然后转到下一个场景

Question

我有一个ScrollMagic场景，上面有很多动画。问题在于控制器似乎无法识别场景。它滚动到其右上方，进入下一个场景。如何使带有动画的场景暂停直到动画完成？我在持续时间内尝试了各种变量，但似乎没有一个起作用。

html：

<div class="screen" id="scene4"><!-- does not pause, scrolls right past-->
    <div id="pinned">
        <div id="third" class="img"></div>
        <div id="second" class="img"></div>
        <div id="first" class="img"></div>

    </div>
    <div class="story-content" id="chunk1">
        <!-- a block of text here-->
    </div>

    <div class="text" id="VFD735">
        <!-- a block of text here-->
    </div>  
</div>  


<div class="screen" id="scene6">
    <!-- full screen image -->
</div>  

css：

.screen {
    position: relative;
    width: 100%;
    z-index: 100;
    float:left;
}
#pinned {
    width: 100%;
    height: 100%;
    position: absolute;
    left:0; top: 0;
}
.img {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}
#first {
    background-image: url('../img/web-EMS-01.jpg');
}
#second {
    background-image: url('../img/web-EMS-02.jpg');
}
#third {
    background-image: url('../img/web-EMS-03.jpg');
}

scrollMagic：

//pin container
var scene = new ScrollMagic.Scene({
        triggerElement: "#pinned",
        duration: '500%', 
        triggerHook: 0, 
        reverse: true 
})
.setPin("#pinned").addTo(controller);   

var tweenScene1 = new TimelineMax()
        .to('#VFD735', .5, {opacity: 1, delay: .5}
        )
        .to('#chunk1', .5, {opacity: 1, delay: 1.2}
        )
        .to("#first", 1, {opacity: 0, delay: 2}
        )
        .to('#second', 1, {opacity: 0, delay: 2.5}
        ); 

var scene = new ScrollMagic.Scene({ 
    triggerElement: '#pinned',
    reverse: true 
})
.setTween(tweenScene1)
.addTo(controller);

//pin scene6
var scene = new ScrollMagic.Scene({
        triggerElement: "#scene6",
        duration: $(window).height() * 2, 
        triggerHook: 0, 
        reverse: true 
})
.setPin("#scene6").addTo(controller);   

Answer 1

答案是，您必须在带有动画的场景之后插入其他具有指定高度的空容器，以便在完成动画之前不会发生任何事情。

<div class="screen bg-transparent height100" id="">
    <div id="second" class="img"></div>
</div>  
<div class="screen bg-transparent height100" id="">

</div>  
<div class="screen bg-transparent height100" id="fade2">

</div>  
<div class="screen bg-transparent height100" id="">

</div>  
<div class="screen bg-transparent height100" id="">
    <div id="third" class="img"></div>
</div>  
<div class="screen bg-transparent height100" id="">

</div>  
<div class="screen bg-transparent height100" id="fade3">

</div>  
<div class="screen bg-transparent height100" id="">

</div>  
<div class="screen bg-transparent height100" id="">

</div>  
<div class="screen bg-transparent height100" id="">

</div>  

.screen {
    position: relative;
    width: 100%;
    z-index: 100;
    float:left;
}
.height100 {
    height: 100vh;
}
#second {
    background: url('../img/web-02.jpg') no-repeat top left;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
}
#third {
    background: url('../img/web-03.jpg') no-repeat top left;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
}

var scene = new ScrollMagic.Scene({
            triggerElement: "#second",
            duration: height*9, //make it stay around
            triggerHook: 0, 
            reverse: true 
    })
    .setPin("#second").addTo(controller);   

    var fadeUp02 = TweenMax.to('#second', 1.5, {opacity: 1}); //fade in timestamp1

    var scene = new ScrollMagic.Scene({ 
        triggerElement: '#fade2' //have some empty screens pass before activate 
    })
    .setTween(fadeUp02)
    .addTo(controller);

    var scene = new ScrollMagic.Scene({
            triggerElement: "#third",
            duration: height*6, 
            triggerHook: 0, 
            reverse: true 
    })
    .setPin("#third").addTo(controller);
//keep going