Basic Starter Pen

HTML

              
                    <script src="js/modernizr.custom.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/lightbox.min.js"></script>
    <script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
    <script type="text/javascript" srgitc="js/jquery.inview.js"></script>
    <script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
    <script type="text/javascript" src="js/jquery.mmenu.fixedelements.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        /*   add your url to the research pdf below*/
        /* var url = "";
         $(".dl").attr("href", url);*/
        /*---end ----*/
        /*  $('a#video').simpleLightboxVideo();*/
        $.localScroll();
        $('nav#mainmenu').mmenu({
            offCanvas: {
                position: "right"
            },
            navbar: {
                title: "Further Insights",
                titleLink: "none"
            },
            onClick: {
                close: true
            },
            extensions: ["pageshadow"]
        });
       /*    $('#hamburger-button').click(function() {
                  var link = $(this);
                  if($('nav#mainmenu').hasClass("mm-opened")){
                      link.text('MORE');
                  } else {
                      link.text('LESS');
                  }
              });
           $('html').click(function() {
 $('#hamburger-button').text('MORE');
});*/
         
        $('.no-fouc').removeClass('no-fouc');
        /*     $(window).on('resize scroll', reposition).trigger('scroll');*/
        var offset = 400;
        var duration = 300;
        $('.totop').hide();
        $(window).scroll(function() {
            if (jQuery(this).scrollTop() > offset) {
                jQuery('.totop').fadeIn(duration);
            } else {
                jQuery('.totop').fadeOut(duration);
            }
        });
        $('.totop').click(function() {
            $("html, body").animate({
                scrollTop: 0
            }, 600);
            return false;
        });
    });
    </script>
</head>

<body id="impact">
 <div id="wrap" class="">
        <ul id="nav" class="Fixed center">
            <li class="first active"><a href="#intro">Section 1</a></li>
            <li class="second"><a href="#second">Section 2</a></li>
            <li class="third"><a href="#third">Section 3</a></li>
        </ul>
        <a href="#" class="totop" style="display: inline;">Go to top</a>
        <div id="header" class="mm-fixed-top Fixed">
            <div>
                <!-- the above div is for dropshadow around logo and primary/mmenu navs-->
                <div id="hleft"><span class="helper"></span>
                    <a href="http://www.unitedcp.com" title="United Capital"><img src="http://flm.pushdesign.net/images/uc_logo.png" alt="United Capital - Financial Life Management tm"></a>
                </div>
                <div id="hright">
                    <!-- MMENU BUTTON nav is id mainmenu at the bottom-->
                    <a href="#mainmenu" id="hamburger-button">MORE</a>
                </div>
            </div>
        </div>
        <!-- end of header -->
        <section id="intro" class="panel">
            <div class="introBG">
                <div class="story">
                    <div class="arrowNav">
                        <a class="next second" href="#second" alt "Next"></a>
                    </div>
                    <div class="intro_sun"><img src="http://flm.pushdesign.net/images/sun.png" width="277" height="269"></div>
                    <div class="copy">
                        <h1 class="blue">Welcome to<br>Financial Life Management</h1>
                        <p class="blue">It’s not about the money
                            <br>The way you live matters more</p>
                    </div>
                </div>
            </div>
        </section>
        <section id="second" class="panel">
            <div class="story">
                <div class="bg">
                    <div class="arrowNav">
                        <a class="next third" href="#third" alt "Next"></a>
                    </div>
                    <div class="second_smile"></div>
                    <div class="copy center">
                        <p class="s2_p1">We work with money every day, but one
                            <br>question often alludes us,</p>
                        <h2 id="s2_h2" class="yellow">"What does it mean to be truly financially happy?"</h2>
                        <p class="s2_p2">Well we thought we'd ask...
                            <br>We hired a team of researchers who asked people just like you what lessons they have learned throughout their entire financial life.
                        </p>
                    </div>
                </div>
            </div>
        </section>
        <section id="third" class="panel">
            <div class="bg">
                <div class="story">
                    <div class="arrowNav">
                        <a class="next fourth" href="#fourth" alt "Next"></a>
                    </div>
                    <div class="third_dot_map"></div>
                    <div class="copy center">
                        <p class="blue">As we talked to people around the country,
                            <br> we took away four really important insights that matter to us, and should matter to you too...</p>
                        <div class="third_insights"><img src="images/insights.png" alt="image of lightbulbs with the numbers 1-4 for upcoming insights"></div>
                        <h1 class="blue">Here is what we learned...</h1>
                    </div>
                </div>
            </div>
        </section>
     <nav id="mainmenu">
            <ul>
                <li>
                    <a href="">FinLife Weekly</a>
                </li>
                <li>
                    <a href="">FinLife Video</a>
                </li>
                <li>
                    <a href="">Our Research</a>
                </li>
                <li>
                    <a class="end" href="'">Money Mind&reg; Analyzer</a>
                </li>
                <!-- <li>
                    <a class="end" href="#">Learn More</a>
                </li> -->
            </ul>
        </nav>
        <!--  END of mainmenu Nav -->
    </div>
    <!--end of wrapper-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.js"></script>
    <script type="text/javascript" src="js/plugins/ScrollToPlugin.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/debug.addIndicators.js"></script> 
    <script type="text/javascript">
    $(document).ready(function() {
       Z // init
        var controller = new ScrollMagic.Controller({
            globalSceneOptions: {
                duration: '50%',
                triggerHook: 'onLeave'

            }
        });

        // get all slides
        var slides = document.querySelectorAll("section .story");

        // create scene for every slide
        for (var i = 0; i < slides.length; i++) {
          console.log(i);
            new ScrollMagic.Scene({
                    triggerElement: slides[i]
                })
                .setPin(slides[i])
                /*.setTween('tl'+i)*/
                /* .addIndicators() */ // add indicators (requires plugin)
                .addTo(controller);
        }
        // change behaviour of controller to animate scroll instead of jump
        controller.scrollTo(function(newpos) {
            TweenMax.to(window, 1, {
                scrollTo: {
                    y: newpos,
                    ease: Power1.easeOut,
                    autoKill: false
                }
            });
        });
        //  bind scroll to anchor links
        $(document).on("click", "a[href^='#']", function(e) {
            var id = $(this).attr("href");
            if ($(id).length > 0) {
                e.preventDefault();

                // trigger scroll
                controller.scrollTo(id);

                // if supported by the browser we can even update the URL.
                if (window.history && window.history.pushState) {
                    history.pushState("", document.title, id);
                }
            }
        });

        var tl0 = new TimelineLite({delay:0.5});
        /*sec2Tween*/
        tl0.from(".second_smile", 1.5, {
            autoAlpha: 0,
            ease: Power1.easeInOut
        });
        /*sec2Tween.from(".s2_p1", 0.5, {
            autoAlpha: 0,
            ease: Power1.easeInOut
        }, "+=0.7")
        .from("#s2_h2", 0.5, {
            scale: 0.8,
            autoAlpha: 0,
            ease: Power1.easeInOut
        }, "+=0.5")
        .from(".s2_p2", 0.5, {
            autoAlpha: 0,
            ease: Power1.easeInOut
        }, "+=0.5");
*/
        var sec2 = new ScrollMagic.Scene({
                triggerElement: '#second .story',
               triggerHook: 'onEnter',
                offset: -500
            })
        
            .setTween(tl0)
           /* .setClassToggle("li.second", "active")*/
        /*.addIndicators()*/
            .addTo(controller);

        var tl1 = new TimelineLite();
        /*sec3Tween*/
        tl1 .from(".third_insights", 100, {
                 yPercent: 30,
               ease: Power1.easeInOut
           }, "+=1000")
        .from(".third_dot_map", 1.5, {
            autoAlpha: 0,
            yPercent: 30,
            scale: 0.5,
            ease: Power1.easeInOut
        }, "+=1000");
    
        /*sec2Tween.from(".s2_p1", 0.5, {
            autoAlpha: 0,
            ease: Power1.easeInOut
        }, "+=0.7")
       
        .from(".s2_p2", 0.5, {
            autoAlpha: 0,
            ease: Power1.easeInOut
        }, "+=0.5");
*/
        var sec3 = new ScrollMagic.Scene({
                triggerElement: '#third .story',
              triggerHook: 'onEnter',
                offset: -500
            })
            .setTween(tl1)
        /*    sec3.setClassToggle("li.third", "active");*/
            /* .addIndicators()*/
            .addTo(controller);

CSS

              
                @charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'agendamedium';
    src: url('font-face/medium-webfont.eot');
    src: url('font-face/medium-webfont.eot?#iefix') format('embedded-opentype'), url('font-face/medium-webfont.woff') format('woff'), url('font-face/medium-webfont.ttf') format('truetype'), url('font-face/medium-webfont.svg#agendamedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Global reset
   https://meyerweb.com/eric/tools/css/reset/ 
*****************************************************************/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
    background-color: #fff;
}
/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    display: inline;
    zoom: 1;
}
/* prevent unstyle elements flashing */
/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%;
    /* 1 */
    
    -ms-text-size-adjust: 100%;
    /* 2 */
    
    -webkit-text-size-adjust: 100%;
    /* 2 */
    
    overflow-y: visible;
    /* always force a scrollbar in non-IE */
    
    overflow-x: hidden!important;
    background-color: #fff;
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    /*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
    
    vertical-align: middle;
    display: block;
}

ol,
ul {
    list-style: none;
}
/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}
/* ==========================================================================
   Parallax Scroll
   ========================================================================== */

body,
html {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    background-color: #fff;
}

body {
    font-family: 'agendamedium', sans-serif;
}

a,
a:link,
a:active,
a:visited {
    -webkit-transition: color 0.25s ease-out;
    -moz-transition: color 0.25s ease-out;
    -o-transition: color 0.25s ease-out;
    transition: color 0.25s ease-out;
    color: #fff;
    outline: none;
    text-decoration: none;
    opacity: 1;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
}

a:hover,
a:hover img {
    opacity: 0.8;
    filter: alpha(opacity=80);
    /* For IE8 and earlier */
}

.no-js {
    /* padding-top: 106px;*/
}
/* for blue in s1*/

h1 {
    font-size: 3em;
    line-height: 1.1em;
    /*62*/
}
/* for yellow in s2*/

h2 {
    font-size: 3.75em;
    line-height: 1.1em;
}

h3 {
    font-size: 2.6em;
    line-height: 2.6em;
}

h4 {
    font-size: 2.3em;
    line-height: 1em;
}

h5 {
    font-size: 2.25em;
}

h6 {
    font-size: 1.75em;
    line-height: 1.87em;
}

.lg {
    font-size: 3.3em;
    line-height: 1.4em;
}

.sm {
    font-size: 1em;
    line-height: 1.4em;
}

p {
    font-size: 1.7em;
    line-height: 1.2em;
    color: #fff;
}

#wrap {
    position: relative;
    width: 100%;
}

#header {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /*     min-width: 680px; */
    
    height: 64px;
    background-color: #004157;
    ;
}

#header > div {
    z-index: 2;
    width: 100%;
    height: 64px;
    background-color: #004157;
    background-color: rgb(0, 65, 86);
    /* Needed for IEs */
    
    zoom: 1;
    -moz-box-shadow: 0 5px 5px rgba(68, 68, 68, 0.75);
    -webkit-box-shadow: 0 5px 5px rgba(68, 68, 68, 0.75);
    box-shadow: 0 5px 5px rgba(68, 68, 68, 0.75);
    filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3, MakeShadow=true, ShadowOpacity=0.75)";
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.75)";
    filter: none \9;
}

#hleft {
    display: table-cell;
    vertical-align: middle;
    height: 64px;
    width: 100%;
}

#hleft img {
    max-width: 666px;
    width: 90%;
    margin: 0;
    padding: 0 0 0 3%;
}

#hright {
    display: table-cell;
    border: 0px;
    width: 102px;
}

.mm-menu {
    z-index: 1000;
    /* fix recommended 9*/
}
/* Nav
*****************************************************************/

#hamburger-button {
    display: block;
    height: 35px;
    width: 92px;
    margin: 3px 30px 0 0;
    padding: 20px 0 0 10px;
    /* for mobile */
    
    background: url(http://flm.pushdesign.net/images/hamburgerBtn.gif) no-repeat right center;
    float: right;
}

#nav {
    z-index: 999;
    position: fixed;
    right: 40px;
    /*   top: 50%;
    transform: translateY(-50%);*/
    /*     margin-top: -40px */
    
    ;
}

#nav li {
    position: relative;
    height: 20px;
}

#nav li a {
    display: block;
    width: 12px;
    height: 12px;
    text-indent: -9999em;
    background: #ddd;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    /* must be the same as width and height */
    
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid #aaa;
    cursor: pointer;
}

#nav li a:hover,
#nav li a:active,
#nav li.active a {
    background: #7f7f7f;
    background: rgba(0, 0, 0, 0.1);
}

.arrowNav a {
    z-index: 10;
    position: absolute;
    bottom: 40px;
    left: 48%;
    height: 50px;
    width: 50px;
    background-image: url(http://flm.pushdesign.net/images/arrow.png);
    background-position: 0 0;
    background-repeat: no-repeat;
}

.arrowNav a:hover,
.arrowNav a:active {
    opacity: 0.5;
}

#intro .arrowNav a,
#third .arrowNav a {
    /*     background-position: 0 0; */
    
    position: absolute;
    bottom: 40px;
    left: 48%;
    height: 50px;
    width: 50px;
    background: url(http://flm.pushdesign.net/images/arrow.png) 0px -50px no-repeat;
}

#second .arrowNav a,
#sixth .arrowNav a,
#seventh .arrowNav a,
#tenth .arrowNav a {
    background-position: 0 0;
}

#seventh .arrowNav a {
    bottom: 10px;
}

#fourth .arrowNav a {
    background-position: 0px -100px;
}

#fifth .arrowNav a {
    background-position: 0px -150px;
}
/* #seventh .arrowNav a {
    background-position: 0px -200px;
} */

#eighth .arrowNav a {
    background-position: 0px -200px;
    opacity: 0.75;
}

#ninth .arrowNav a {
    background-position: 0px -250px;
}

.dlDiv {
    height: 55px;
    width: 155px;
}

.dl {
    position: absolute;
    height: 43px;
    width: 105px;
    padding: 13px 0 0 70px;
    font-size: 0.9em;
    text-transform: capitalize;
    line-height: 1.1em;
    /* color: #8C8C35; */
    color:#fff;
 /*    color: rgb(140, 140, 53); */
    background: url(http://flm.pushdesign.net/images/downloadLogo.png) top left no-repeat;
}

.dl a:hover,
.arrowNav a:hover,
.arrowNav a:active {
    opacity: 0.5;
    filter: alpha(opacity=50);
    /* For IE8 and earlier */
}

a.btn_cta {
    position: absolute;
    bottom: 10%;
    left: 42%;
    height: 42px;
    width: 202px;
    color: #000;
    font-size: 1.4em;
    line-height: 1em;
    text-align: center;
    padding-top: 20px;
    background: url(http://flm.pushdesign.net/images/btn_cta_bg.png) center center no-repeat;
}

a.totop {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 10000;
    display: inline-block;
    text-indent: -999em;
    width: 32px;
    height: 32px;
    color: #bbbbbb;
    color: rgba(0, 0, 0, 0.4);
    border: 2px solid;
    border-radius: 4px;
    background: url(http://flm.pushdesign.net/images/up_arrow.png) 3px 4px no-repeat;
}
/*
 mmenu  restyle for this page
-------------------------------------------  */

.mm-menu {
    background-color: #004157;
    color: #A9B036;
}

.mm-menu > .mm-panel {
    background-color: #004157;
}
/* .mm-menu .mm-navbar a.mm-title,  .mm-menu .mm-navbar a {
color:#fff;
  color: rgba(240, 240, 240, 0.8);
} */

.mm-navbar,
.mm-listview > li:after {
    border-bottom: 1px solid #ddd;
    /*  border-color:rgba(240, 240, 240, 0.8)  */
}

.mm-listview > li > a,
.mm-listview > li > span {
    padding-left: 3em;
}

.mm-listview a {
    text-decoration: none;
    height: 50px;
    font-size: 1.2em;
    /*0.87*/
    
    line-height: 1.2em;
}

.mm-listview a:hover {
    background-color: #8B8C34;
    color: #fff;
}
/*
    style the groups
  --------------------------------------------- */
/* content */

.panel {
    height: 100vh;
    width: 100vw;
    /*   margin-bottom: 400px; */
    
    overflow: hidden;
    bottom: 0;
    left: 0;
}

.story {
    position: relative;
    padding: 0;
    margin: 0 !important;
    height: 100vh;
    width: 100vw;
}

#intro .story {}

.introBG {
    position: relative;
    height: 100vh;
    bottom: 0;
    left: 0;
    /*   background: rgb(255, 255, 255) */
    
    ;
    background: url(http://flm.pushdesign.net/images/s1_bg.jpg) left bottom no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://flm.pushdesign.net/images/s1_bg.jpg', sizingMethod='scale')";
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://flm.pushdesign.net/images/s1_bg.jpg', sizingMethod='scale')";
}

.intro_sun {
    position: absolute;
    top: 23%;
    left: 65%;
    width: 277;
    height: 269;
}

#intro .copy {
    position: absolute;
    top: 45%;
    left: 25%;
    width: 63%;
}

#intro h1 {
    position: relative;
    text-align: center;
    margin: 0;
    padding-bottom: 5%;
}

#intro p {
    position: relative;
    text-align: center;
}

#second {
    /*   z-index: 5; */
    /* slide over groups 1 and 3 */
}

#second .story,
#sixth .story,
#tenth .story,
#footer {
    background: rgb(59, 109, 131);
    height: 100vh;
    bottom: 0;
    left: 0;
}

#second .copy {
    position: absolute;
    left: 15%;
    width: 72%;
}

#second .yellow {
    color: #FFDE17;
    color: rgb(255, 222, 23);
    position: relative;
    text-align: center;
    padding: 3% 0;
}

#second p {
    margin: 0;
    padding: 0;
    text-align: center;
}

.second_smile {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    background: url(http://flm.pushdesign.net/images/s2_smile.png) center center no-repeat;
}

#third .story {
    background: #fff url(../images/s3_bg.jpg) 0px bottom no-repeat;
    height: 100vh;
}

#third .copy {
    position: absolute;
    left: 15%;
    width: 72%;
}

#third p {
    position: relative;
    text-align: center;
    padding-bottom: 3%;
}

#third h1 {
    position: relative;
    text-align: center;
    padding-top: 3%;
}

.third_insights {
    position: relative;
    width: 100%;
    /* background: url(../images/insights.png) center center no-repeat; */
}

.third_insights img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.third_dot_map {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    background: url(http://flm.pushdesign.net/images/dot_map.png) center center no-repeat;
}

JS

              
                 // init
        var controller = new ScrollMagic.Controller({
            globalSceneOptions: {
                duration: '50%',
                triggerHook: 'onLeave'

            }
        });

        // get all slides
        var slides = document.querySelectorAll("section .story");

        // create scene for every slide
        for (var i = 0; i < slides.length; i++) {
          console.log(i);
            new ScrollMagic.Scene({
                    triggerElement: slides[i]
                })
                .setPin(slides[i])
                /*.setTween('tl'+i)*/
                /* .addIndicators() */ // add indicators (requires plugin)
                .addTo(controller);
        }
        // change behaviour of controller to animate scroll instead of jump
        controller.scrollTo(function(newpos) {
            TweenMax.to(window, 1, {
                scrollTo: {
                    y: newpos,
                    ease: Power1.easeOut,
                    autoKill: false
                }
            });
        });
        //  bind scroll to anchor links
        $(document).on("click", "a[href^='#']", function(e) {
            var id = $(this).attr("href");
            if ($(id).length > 0) {
                e.preventDefault();

                // trigger scroll
                controller.scrollTo(id);

                // if supported by the browser we can even update the URL.
                if (window.history && window.history.pushState) {
                    history.pushState("", document.title, id);
                }
            }
        });

        var tl0 = new TimelineLite({delay:0.5});
        /*sec2Tween*/
        tl0.from(".second_smile", 1.5, {
            autoAlpha: 0,
            ease: Power1.easeInOut
        });
      
        var sec2 = new ScrollMagic.Scene({
                triggerElement: '#second .story',
               triggerHook: 'onEnter',
                offset: -500
            })
        
            .setTween(tl0)
           /* .setClassToggle("li.second", "active")*/
        /*.addIndicators()*/
            .addTo(controller);

        var tl1 = new TimelineLite();
        /*sec3Tween*/
        tl1 .from(".third_insights", 1, {
                 yPercent: 30,
               ease: Power1.easeInOut
           }, "+=1000")
        .from(".third_dot_map", 1.5, {
            autoAlpha: 0,
            yPercent: 30,
            scale: 0.5,
            ease: Power1.easeInOut
        }, "+=1");
    
        /*sec2Tween.from(".s2_p1", 0.5, {
            autoAlpha: 0,
            ease: Power1.easeInOut
        }, "+=0.7")
       
        .from(".s2_p2", 0.5, {
            autoAlpha: 0,
            ease: Power1.easeInOut
        }, "+=0.5");
*/
        var sec3 = new ScrollMagic.Scene({
                triggerElement: '#third .story',
              triggerHook: 'onEnter',
                offset: -500
            })
            .setTween(tl1)
        /*    sec3.setClassToggle("li.third", "active");*/
            /* .addIndicators()*/
            .addTo(controller);

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions