Wes Modes

Horizontal Scrolling with ScrollMagicJS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.js"></script>
<div id="inner-wrapper">
    <div class="table-wrap" id="table-0-0" style="display: table-cell;">
        <div class="shot-wrap shot full" id="shot-0-0">
            <div class="content full" id="content-0-0">
                <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/RCA_Indian_Head_test_pattern.JPG" />
            </div>
        </div>
    </div>
    <div class="table-wrap" id="table-0-1" style="display: table-cell;">
        <div class="shot-wrap shot full" id="shot-0-1">
            <div class="content full" id="content-0-1">
                <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/RCA_Indian_Head_test_pattern.JPG" />
            </div>
        </div>
    </div>
    <div class="table-wrap" id="table-0-2" style="display: table-cell;">
        <div class="shot-wrap shot full" id="shot-0-2">
            <div class="content full" id="content-0-2">
                <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/RCA_Indian_Head_test_pattern.JPG" />
            </div>
        </div>
    </div>
</div>

CSS

#body {

    width: 100vw;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 0;

    margin: 0;

    overflow-x: scroll;

    overflow-y: hidden;

    font-size: 14px;

    color: white;

}

#inner-wrapper {

    display: table;

}

.table-wrap {

    display: table-cell;

}

#doc-canvas, #outer-wrapper, #inner-wrapper, #table-wrapper {

    height: 100vh;

}

.full {

    height: 100vh;

    width: 100vw;

    overflow: hidden;

}

.shot {

    width: 100vw;

    float: left;

    display: inline;

}

.content {

    position: absolute;

    top: 0px;

    color: white;

    font-size: 14px;

}

img {

    width: 100vw;

    vertical-align: middle;

}

JavaScript

scrollControl = new ScrollMagic({
    vertical: false,
});

var myScrollScene = new ScrollScene({
    triggerHook: 0,
    offset: 0,
    triggerElement: '#shot-0-1',
    duration: '100vw',
    pushFollowers: true
})
    .setPin('#shot-0-1')
    .addTo(scrollControl);