in scrollmagic, how would I pin a scene, have an animation take place in that scene, then have the next scene scroll over it?

I've successfully pinned a screen in ScrollMagic and had a mask over the scene fade up in opacity. But the scene won't stay pinned while the next screen scrolls up. I want the first scene to do its animation and stay there, then the second scene scroll up over the first scene. Anyone know what I'm doing wrong? Is it because my purple-mask is absolutely positioned?

This jsfiddle doesn't have the animation working with the scroll, but for some reason, it does work on my local computer.

https://jsfiddle.net/LNMSchneiderman/rsbw3vka/27/

jquery:

var height = $(window).height();

$(document).ready(function() {
    $('.mask, .load_p').delay( 1100 ).fadeOut(1000);

    var fadeUp01 = TweenMax.to('#purple-mask', 1.5, {opacity: .9}); //fade in timestamp1

    var scene = new ScrollMagic.Scene({
            triggerElement: "#screen1",
            duration: height, 
            triggerHook: 0, 
            reverse: true 
    })
    .setPin("#screen1", {pushFollowers: true})
    .setTween(fadeUp01)
    .addTo(controller);
});

html:

<div class="screen" id="screen1">
    <div id="purple-mask"></div>

    <div class="date">October 16, 1915</div>
    <hr/>
    <div class="title">Seven thousand march for "Votes for Women"</div>
    <div class="caption">About 7,000 people marched supporting women's right to vote. </div>
</div>

<div class="screen" id="screen2">
<h1>Getting women the vote</h1>
<div class="intro-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus, urna non bibendum imperdiet, turpis quam iaculis nibh, sit amet porttitor nisl metus eget augue. Phasellus bibendum, arcu a dignissim convallis, massa risus ultrices massa, dignissim aliquet quam nibh at eros. Sed congue mattis varius. Suspendisse ultrices non tellus in posuere. Morbi maximus a diam ac blandit. Pellentesque tristique ante id eleifend accumsan. Cras vitae aliquet orci. Cras dictum erat eget turpis placerat, ac vulputate urna luctus. Suspendisse sit amet fringilla turpis. Nulla tincidunt malesuada laoreet. Mauris et mi orci.</p>
</div>

</div>

css:

h1 {
    font-family: 'Martel', serif;
    font-size: 2.9rem;
    font-weight: bold;
    text-align: center;
    padding: 0 20px;
    margin-bottom: 20px;
    margin-top: 5vh;
    color:white;
}
.date {
    font-family: 'Martel', serif;
    font-size: 1.1rem;
    text-align: center;
    padding-bottom: 0px;
    margin-top: 50px;
    font-weight: 600;
}
hr {
    width: 12vw;
    text-align: center;
    margin: 0 auto;
    border: none;
    color: black;
    background-color: black;
    height: 2px;
    padding-top: 0;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
}
.title {
    font-family: 'Martel', serif;
    color: #9b9b9b;
    font-weight:600;
    font-size: 1.8rem;
    text-align: center;
    margin-top: 10px;
}

.caption {
    font-size: 1rem;
    text-align: center;
    line-height: 140%;
    color: gray;
    font-family: 'Martel', serif;
    text-shadow: none;
    width: 86%;
    margin-left: 7%;
    margin-top: 10px;

}

.screen {
        position: relative;
            width: 100%;
            z-index: 100;
            height: 100vh;
            background-color: transparent;
}
#screen2 {
   background-color: green;
   opacity: 0.5;

}
#purple-mask {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #3b253b;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
}

Augh! OK, I have figured it out. I forgot about it. You have enclose all the content in screen1 in a div, say id="first", then pin that, not the enclosing screen. Then you pin and fade up the purple-mask.

So the html looks like this:

<div class="screen" id="screen1">
    <div id="purple-mask"></div>
    <div id="first">
    <div class="date">October 16, 1915</div>
    <hr/>
    <div class="title">Seven thousand march for "Votes for Women"</div>
    <div class="caption">About 7,000 people marched supporting women's right to vote</div>
    <div><!-- end of first -->
</div>

<div class="screen"></div>

<div class="screen" id="screen2">
<h1>Getting women the vote</h1>
<div class="intro-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus, urna non bibendum imperdiet, turpis quam iaculis nibh, sit amet porttitor nisl metus eget augue. Phasellus bibendum, arcu a dignissim convallis, massa risus ultrices massa, dignissim aliquet quam nibh at eros. Sed congue mattis varius. Suspendisse ultrices non tellus in posuere. Morbi maximus a diam ac blandit. Pellentesque tristique ante id eleifend accumsan. Cras vitae aliquet orci. Cras dictum erat eget turpis placerat, ac vulputate urna luctus. Suspendisse sit amet fringilla turpis. Nulla tincidunt malesuada laoreet. Mauris et mi orci.</p>
</div>

</div>

And the code looks something like this:

var fadeUp01 = TweenMax.to('#purple-mask', 1.5, {opacity: .9}); //fade in timestamp1

var scene = new ScrollMagic.Scene({
        triggerElement: "#screen1",
        duration: height*3, 
        triggerHook: 0, 
        reverse: true 
})
.setPin("#first", {pushFollowers: true})
.addTo(controller);

var scene = new ScrollMagic.Scene({
        triggerElement: "#screen1",
        duration: height*3, 
        triggerHook: 0, 
        reverse: true 
})
.setPin("#purple-mask", {pushFollowers: true})
.setTween(fadeUp01)
.addTo(controller);