Mo.js motion lib

Testing new tool

HTML

<script src="//cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
<!-- <script src="//cdn.jsdelivr.net/mojs/latest/mo.min.js"></script> 
npm install mo-js
-->
<svg id="rainy" width="56" height="50" viewBox="0 0 56 48">
    <g class="cloud">
        <path d="M47.126,11.49c-0.469,0-0.919,0.069-1.37,0.138c-2.078-4.173-6.345-7.068-11.326-7.068c-0.45,0-0.876,0.086-1.313,0.133 C30.388,1.809,26.533,0,22.25,0C15.042,0,9.026,5.093,7.599,11.875C3.29,12.599,0,16.32,0,20.833c0,5.032,4.079,9.112,9.113,9.112 c2.147,0,4.095-0.773,5.653-2.017c2.203,1.275,4.754,2.017,7.483,2.017c2.293,0,4.458-0.53,6.401-1.452 c1.74,0.897,3.687,1.452,5.779,1.452c2.562,0,4.934-0.772,6.928-2.076c1.585,1.278,3.573,2.076,5.768,2.076 c5.099,0,9.229-4.132,9.229-9.229C56.356,15.622,52.225,11.49,47.126,11.49z" />
    </g>
    <g class="drops">
        <path d="M10.065,36.395c-1.542,0-2.792,4.345-2.792,5.886c0,1.54,1.25,2.792,2.792,2.792c1.543,0,2.793-1.25,2.793-2.792 C12.858,40.738,11.608,36.395,10.065,36.395z" class="drop" />
        <path d="M34.431,39.013c-1.542,0-2.792,4.344-2.792,5.886c0,1.541,1.25,2.793,2.792,2.793c1.543,0,2.792-1.252,2.792-2.793 C37.223,43.357,35.974,39.013,34.431,39.013z" class="drop" />
        <path d="M22.098,32.227c-1.543,0-2.793,4.344-2.793,5.889c0,1.542,1.25,2.792,2.793,2.792c1.542,0,2.791-1.25,2.791-2.792 C24.889,36.571,23.64,32.227,22.098,32.227z" class="drop" />
        <path d="M46.208,33.396c-1.542,0-2.792,4.345-2.792,5.887s1.25,2.791,2.792,2.791s2.793-1.25,2.793-2.791 S47.75,33.396,46.208,33.396z" class="drop" />
    </g>
</svg>
<div class="square" id="js-square"> </div>

CSS

body {
    margin: 0;
    background-color: #75BBFF;
    /* display: flex; */
    /* flex-flow: column; */
    /* justify-content: center; */
    /* align-content: center; */
}
/* svg{margin: 10% auto;} */
 div {
    background-color: #75BBFF;
    /* justify-content: center; */
    /* width: 100%; */
}
#rainy {
    margin: 5em 50%;
    width: 15em;
    height: 15em;
}
.cloud {
    fill: snow;
}
.drops {
    fill: lightskyblue;
}
.square {
    width: 50px;
    height: 50px;
    background: #504FEF;
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    transform-origin: center bottom;
    border-radius: 50%;
}

JavaScript

var square = document.querySelector('#js-square'),
        translateCurve = mojs.easing.path('M0,100 L25,99.9999983 C34.6815219,20.073713 40.852195,-3.12132897e-09 100,0'),
        squashCurve = mojs.easing.path('M0,100.004963 C0,100.004963 25,147.596355 25,100.004961 C25,70.7741867 32.2461944,85.3230873 58.484375,94.8579105 C68.9280825,98.6531013 83.2611815,99.9999999 100,100');

    function run() {
        new mojs.Tween({
            repeat: 999,
            delay: 2000,
            duration: 1000,
            onUpdate: function (progress) {
                var translateProgress = translateCurve(progress),
                    squashProgress = squashCurve(progress),
                    scaleX = 1 - 2 * squashProgress,
                    scaleY = 1 + 2 * squashProgress;

                square.style.transform =
                    'translateY(' + -180 * translateProgress + 'px) ' +
                    'scaleX(' + scaleX + ') ' + 'scaleY(' + scaleY + ')';
            }
        });
    }
    run();