JSFiddle - React, Tailwind, and code Playground

by Alejandro

HTML

<div id="block1">Block 1</div>
<div id="block2">Block 2</div>

CSS

#block1, #block2 {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 5px;
    color: #fff;
    padding: 10px;
    position: absolute;
}
#block1 {
    background-color: red;
}
#block2 {
    background-color: blue;
    left: 150px;
}

JavaScript

block1 = $('#block1');
block2 = $('#block2');

block1.delay(400).animate({'left':300}, 'slow');
block2.delay(400).animate({'top':200}, 'slow');
block2.delay(700).animate({'width':200,'height':200}, 'slow');
block1.delay(900).animate({'left':-200,'opacity':0}, 'slow');
block2.delay(1000).animate({'top':-200,'height':-200,'opacity':0}, 'slow');