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

I have a ScrollMagic scene with a bunch of animations on it. The problem is that the controller doesn't seem to recognize the scene. It scrolls right past it onto the following scene. How can I make the scene with animation pause until the animation is finished? I've tried all kinds of variables in duration and none seems to work.

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

The answer is, you have to insert additional empty containers, each with a specified height, after the scene with the animation so that nothing happens until the animation is done.

<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