Wes Modes

Horizontal Scrolling with ScrollMagicJS

by Jan Paepke

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.debug.js"></script>
<div id="first" class="fixed">

</div>
<div id="second" class="fixed"></div>
<div id="spacer"></div>

CSS

.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}
#first {
    background-image: url(http://i.huffpost.com/gen/1860407/images/o-BLACK-FOOTED-CAT-KITTENS-facebook.jpg);
}
#second {
    background-image: url(http://stuffpoint.com/dogs/image/224832-dogs-cute-dog.jpg);
}
#spacer {
    height: 200vh;
}

JavaScript

scrollControl = new ScrollMagic();

var hideAni = TweenMax.to('#second', 1, {autoAlpha: 0});

var myScrollScene = new ScrollScene({
    offset: 50,
    duration: 300
})
    .setTween(hideAni)
    .addTo(scrollControl)
    .addIndicators({zindex: 1});