HTML
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px"
viewBox="0 0 300 150" style="enable-background:new 0 0 300 150;" xml:space="preserve">
<g>
<circle id="st1" cx="90" cy="100" r="10" fill="#0a84c1"/>
</g>
<g>
<circle id="st2" cx="150" cy="100" r="10" fill="#0a84c1"/>
</g>
<g>
<circle id="st3" cx="210" cy="100" r="10" fill="#0a84c1"/>
</g>
</svg>
</div>
JAVASCRIPT
"use strict";
var circle1 = document.getElementById("st1");
var circle2 = document.getElementById("st2");
var circle3 = document.getElementById("st3");
var MAX_RADIUS = 10;
var MIN_RADIUS = 0;
var MAX_Y = 80;
var MIN_Y = 60;
var start = Date.now();
setInterval(function () {
var t = 0.001 * (Date.now() - start);
animate(t);
}, 1);
// Bounce interpolation. t and interval should both be in seconds
function bounce(min, max, t) {
var offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var interval = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1.25;
var x = t * Math.PI * (1 / interval);
return max - Math.abs(Math.sin(x) * (max - min));
}
function scale(min, max, t) {
var offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var interval = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1.25;
var x = t * Math.PI * 2 * (1 / interval);
return Math.min(max, min + (max * 2 - min) * 0.5 * (1 - Math.cos(x)));
}
function animate(t) {
circle1.setAttribute("cy", bounce(MIN_Y, MAX_Y, t, 2));
circle1.setAttribute("r", scale(MIN_RADIUS, MAX_RADIUS, t, 2));
circle2.setAttribute("cy", bounce(MIN_Y, MAX_Y, t + 0.25, 2));
circle2.setAttribute("r", scale(MIN_RADIUS, MAX_RADIUS, t + 0.25, 2));
circle3.setAttribute("cy", bounce(MIN_Y, MAX_Y, t + 0.5, 2));
circle3.setAttribute("r", scale(MIN_RADIUS, MAX_RADIUS, t + 0.5, 2));
}
