JSFiddle - React, Tailwind, and code Playground

by creativecouple

HTML

<script src="http://creativecouple.github.io/jquery-timing/jquery-timing.min.js"></script>
<div class="example">
  <span class="stick">&nbsp;</span>
  <span class="ball">&nbsp;</span>
  <span class="stick">&nbsp;</span>
</div>

CSS

.example {
    text-align: center;
    height: 200px;
    width: 400px;
    padding: 0;
    margin: 1em auto;
    position: relative;
    background: none transparent;
    border: solid #666;
    border-width: 0 1px
}
.example span {
    width: 40px;
    height: 40px;
    padding: 5px;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    color: white;
    margin: 0;
    padding: 0;
}
.example .stick {
    width: 20px;
    background: #888;
    border: 1px solid #ccc;
}
.example .stick:first-child {
    left: -10px;
}
.example .stick:last-child {
    left: 390px;
}
.example .ball {
    left: 10px;
    background: orange;
    border: 1px solid red;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

JavaScript

var options = { duration:2000, easing:'linear', queue:'myFX' };
$('.example .ball').repeat().animate({left:350},options).animate({left:10},options).join('myFX')
    ._.dequeue('myFX');

var options = { duration:900, easing:'linear' };
$('.example span').repeat().animate({top:160},options).animate({top:0},options).join();