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 class="spacer">
    this is some content before
</div>
<div id="pinned">
    <div id="first" class="img"></div>
    <div id="second" class="img"></div>
</div>
<div class="spacer">
    this is some content after
</div>

CSS

body, html {
    height: 100%;
}
#pinned {
    width: 100%;
    height: 100%;
}
.img {
    position: absolute;
    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: 50vh;
    line-height: 50vh;
}

JavaScript

scrollControl = new ScrollMagic();

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

// scene used to pin the container
var pinScene = new ScrollScene({
    triggerHook: 0,
    triggerElement: '#pinned',
    duration: 600
})
    .setPin('#pinned')
    .addTo(scrollControl)
    .addIndicators({zindex: 1, suffix: 'pin'});

// scene used to fade the images
var aniScene = new ScrollScene({
    triggerHook: 0,
    triggerElement: '#pinned',
    offset: 100,
    duration: 300
})
    .setTween(hideAni)
    .addTo(scrollControl)
    .addIndicators({zindex: 1, suffix: 'ani'});