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

Question

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

Answer 1

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