JSFiddle - React, Tailwind, and code Playground

by Stev Peifer

HTML

<div id="parent">
    <div class="child">
        Child1
    </div><div class="child">
        Child2
        <br />
        Child2
        <br />
        Child2
    </div><div class="child">
        Child3
        <br />
        Child3
    </div>
</div>

CSS

#parent{
                border:1px solid red;
                display:block;
                margin:auto;
                overflow:hidden; /* Comment this line to see children */
                padding:5px;
                position:relative;
                white-space:nowrap;
                width:200px;
        }
        .child{
                background-color:yellow;
                box-sizing:border-box;
                display:inline-block;
                margin:0;
                vertical-align:top;
                width:100%;
        }

JavaScript

$('.child:eq(0)').animate(
    {
        marginLeft:'-200%' //~ Move it back 2 children
    },
    3000,
    function(){
        $('.child:eq(0)').animate(
            {
                marginLeft:'-100%' //~ Move it back 1 child
            },
            3000
        );
    }
);