JSFiddle - React, Tailwind, and code Playground

by MartinTale

HTML

<div class="wrap">
    <div class='object' data-width='100' data-height='150' style="top:10px;left:10px;width:100px;height:150px;background-color: red;"></div>
    <div class='object' data-width='200' data-height='100' style="top:110px;left:160px;width:200px;height:100px;background-color: green;"></div>
    <div class='object' data-width='150' data-height='150' style="top:260px;left:10px;width:150px;height:150px;background-color: blue;"></div>
</div>
<button id="trigger">Shrink</button>
<button id="reset">Reset</button>

CSS

.wrap{
    width:400px;
    height:410px;
    border:solid 1px #ccc;
}
.object{
    position: absolute;
    border:solid 1px #ccc;
}

JavaScript

shrink_ratio = 0.5;
$('button#trigger').click(function(){
    $('.object').animate({
        end: 1
    }, {
        duration: 500,
        step: function(now, fx) {
            startWidth = $(this).data('width');
            startHeight = $(this).data('height');
            $(this).css({width: startWidth - shrink_ratio * startWidth * now, 
                         height: startHeight - shrink_ratio * startHeight * now});
        },
        queue: false
    });
});

$('button#reset').click(function(){
    $('.object').animate({
        end: 0
    }, {
        duration: 500,
        step: function(now, fx) {
            startWidth = $(this).data('width');
            startHeight = $(this).data('height');
            $(this).css({width: startWidth - shrink_ratio * startWidth * now, 
                         height: startHeight - shrink_ratio * startHeight * now});
        },
        queue: false
    });
});