JSFiddle - React, Tailwind, and code Playground

by webdevem

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=4.7.4"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<div class="l-split">
    <div class="keyframes">
        <div class="keyframe keyframe-1">
            <div class="l-side l-side-left">
                <div class="copy">
                    <h2>Slide 1</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi nesciunt dolor quae animi veritatis totam quibusdam, soluta, unde inventore doloremque corporis odio at impedit aliquam quis nemo molestias nostrum? Deserunt. Voluptatum
                    commodi perferendis recusandae sequi facilis nam totam unde, mollitia quidem quasi dolore laboriosam hic ratione. Eaque repellat soluta laboriosam laborum non, fuga. Vero enim, quidem a recusandae veritatis animi?

                    <img class="visible-xs img-responsive" src="http://www.lds.com/wp-content/uploads/2016/09/people_businessconsumers_image.jpg" alt="">

                </div>
            </div>
            <div class="l-side l-side-right">
                <div class="supporting-content">
                    <img class="image" src="http://www.lds.com/wp-content/uploads/2016/09/people_businessconsumers_image.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="keyframe keyframe-2 ">
            <div class="l-side l-side-left">
                <div class="copy">
                    <h2>Slide 2</h2> Quisquam dolorem perferendis temporibus, saepe vero recusandae eius, vel fugit fuga magnam nemo iure, quos voluptatem deserunt omnis, quo. Maiores unde praesentium, et porro accusantium, reiciendis exercitationem consequatur placeat
                    iure. Non porro aliquid doloremque, eaque corrupti ratione illo natus facilis accusamus hic modi at suscipit consequuntur delectus ad fugit qui, ipsam! Tenetur quaerat, modi voluptatibus eaque labore beatae odit assumenda!

            ...

CSS

* {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

    body {
        padding: 0;
        margin: 0;
        font: 100%/1.4 sans-serif;
        color: #444;
    }

    .l-split {
        position: relative;
        min-height: 100%;
        width: 100%;
    }

    .l-side {
        position: relative;
        z-index: 100;
        top: 0;
        width: 50%;
        height: 100%;
    }

    .l-side-left {
        left: 0;
    }

    .l-side-right {
        position: fixed;
        right: 0;
        top: 0;

        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);

        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

    .is-current .l-side-right {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    .intro .copy {
        text-align: center;
        padding-top: 30%;
    }

    .intro .l-side-right {
        background-color: #FFD8F8;

        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);

        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }


    .keyframes {
        position: relative;
    }

    .keyframe {
        height: 110%;
    }

    .keyframe-4 {
        height: 100%;
        padding-top: 10%;
    }

    .keyframe-1 .l-side-right {
        background-color: #E8CBB6;
    }

    .keyframe-2 .l-side-right {
        background-color: #FFFCD4;
    }

    .keyframe-3 .l-side-right {
        background-color: #B6E8C4;
    }

    .keyframe-4 .l-side-right {
...

JavaScript

$(document).ready(function() {
        // init
        var ctrl = new ScrollMagic.Controller({
            globalSceneOptions: {
                // triggerHook: 'onLeave'
            }
        });

        new ScrollMagic.Scene({
                triggerElement: ".keyframe-1 .l-side-left"
            })
            .setClassToggle(".keyframe-1", "is-current") // add class toggle
            // .addIndicators() // add indicators (requires plugin)
            .addTo(ctrl);

        new ScrollMagic.Scene({
                triggerElement: ".keyframe-2 .l-side-left"
            })
            .setClassToggle(".keyframe-2", "is-current") // add class toggle
            // .addIndicators() // add indicators (requires plugin)
            .addTo(ctrl);

        new ScrollMagic.Scene({
                triggerElement: ".keyframe-3 .l-side-left"
            })
            .setClassToggle(".keyframe-3", "is-current") // add class toggle
            // .addIndicators() // add indicators (requires plugin)
            .addTo(ctrl);

        new ScrollMagic.Scene({
                triggerElement: ".keyframe-4 .l-side-left"
            })
            .setClassToggle(".keyframe-4", "is-current") // add class toggle
            // .addIndicators() // add indicators (requires plugin)
            .addTo(ctrl);

        new ScrollMagic.Scene({
                triggerElement: ".keyframe-5 .l-side-left"
            })
            .setClassToggle(".keyframe-5", "is-current") // add class toggle
            // .addIndicators() // add indicators (requires plugin)
            .addTo(ctrl);

        // Create scene
        // $(".keyframe").each(function() {
        // var trigger = $(this).find('.l-side-left');
        // console.log (trigger);
        //     new ScrollMagic.Scene({
        //         triggerElement: $(this).find('.l-side-left'),
        //         duration: '50%'
        //     })
        //     .setClassToggle($(this),"is-current")
        //     .addTo(ctrl);
        //...