animation-stepper
Version:
Javascript library to handle several animations at once using a singleton approach. One window.requestAnimationFrame instance will be running in the background to orchest all animations.
68 lines (53 loc) • 2.35 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Script-based animation using requestAnimationFrame</title>
<style>
body {
background-color: black;
color: rgb(77, 77, 77);
background-color: black;
color: rgb(77, 77, 77);
font-family: sans-serif;
font-size: 12px;
font-weight: 100;
overflow: hidden;
}
</style>
<script>
(function() {
var lastTime = 0,
vendors = ['ms', 'moz', 'webkit', 'o'],
x,
length,
currTime,
timeToCall;
for(x = 0, length = vendors.length; x < length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
currTime = new Date().getTime();
timeToCall = Math.max(0, 16 - (currTime - lastTime));
lastTime = currTime + timeToCall;
return window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
</script>
</head>
<body>
<script type="text/javascript" src="./div-lines.js"></script>
<script type="text/javascript" src="./../../src/animation-stepper.js"></script>
<script type="text/javascript" src="./demo-4-animations.js"></script>
</body>
</html>