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

Question

我有一个 ScrollMagic 场景，上面有一堆动画。问题是控制器似乎无法识别场景。它从它身边滚动到下一个场景。如何让动画场景暂停直到动画完成？我在持续时间内尝试了各种变量，none 似乎有效。

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');
}

滚动魔法：

//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

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

Make ScrollMagic pause while animation is happening, then go to next scene

scrollmagic