JSFiddle - React, Tailwind, and code Playground

by fatfrank44

HTML

<script src="https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js"></script>
<script src="https://github.com/johnpolacek/superscrollorama/blob/master/js/jquery.superscrollorama.js"></script>
<div id="content-wrapper">
    <div id="container">
        <div class="numbers"></div>
    </div>
    <div id="container2">
        <div class="numbers"></div>
    </div>
</div>

CSS

#content-wrapper {
    height: 500px;
    float: left;
    visibility: visible;
}
#container, #container2 {
    width: 331px;
    height: 105px;
    margin: 15px;
    background-color: #666;
}
.numbers {
    width: 36px;
    height: 50px;
    background-color: #dc000f;
    float: left;
}

JavaScript

var controller = $.superscrollorama();
// individual element tween examples
controller.addTween('#container', TweenMax.fromTo($('#container'), .25, {
    css: {
        opacity: 0,
        scale: 0,
    },
    immediateRender: true,
    ease: Quad.easeInOut
}, {
    css: {
        opacity: 1,
        scale: 1
    },
    ease: Quad.easeInOut
}));
controller.addTween('#container2', TweenMax.fromTo($('#container2'), .25, {
    css: {
        opacity: 0,
        scale: 0,
    },
    immediateRender: true,
    ease: Quad.easeInOut
}, {
    css: {
        opacity: 1,
        scale: 1
    },
    ease: Quad.easeInOut
}));


$('.numbers').delay(1).animate({
    'margin-left': '100px'
}, {
    duration: 1000,
    queue: true
});