Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE HTML> <html> <head> <title>Title of the Document</title> <script src="https://js.cx/libs/animate.js"></script> <style> #brick { width: 40px; height: 25px; background: blue; position: relative; cursor: pointer; } #path { outline: 1px solid #E8C48E; width: 540px; height: 25px; } </style> </head> <body> <div id="path"> <div id="brick"></div> </div> <script> function makeEaseOut(time) { return function(fractionOfTime) { return 1 - time(1 - fractionOfTime); } } function bounce(fractionOfTime) { for(let a = 0, b = 1, result; 1; a += b, b /= 2) { if(fractionOfTime >= (7 - 4 * a) / 11) { return -Math.pow((11 - 6 * a - 11 * fractionOfTime) / 4, 2) + Math.pow(b, 2) } } } let bounceEaseOut = makeEaseOut(bounce); brick.onclick = function() { animate({ duration: 2000, timing: bounceEaseOut, draw: function(progress) { brick.style.left = progress * 500 + 'px'; } }); }; </script> </body> </html>