Skip to content

Instantly share code, notes, and snippets.

@mrosata
Last active August 29, 2015 14:16
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mrosata/1a479aea9000b16830f7 to your computer and use it in GitHub Desktop.
Animate multiple elements with different positions and timing using an object to manage each frame with a queue
/* Animation Queue Object using vanilla JavaScript
* by: Michael Rosata
* https://jsfiddle.net/mrosata/gb96gcme/2/
*/
function AnimeQ (int) {
this.intv = parseInt(int,10) || 10;
this.queue = [];
}
AnimeQ.prototype.addToQueue = function (item) {
item.animating = true;
this.queue.push(item);
// If this is the first/only item, start queue
if (this.queue.length == 1) {
this.startQueue();
}
};
AnimeQ.prototype.removeFromQueue = function (item) {
var index = this.queue.indexOf(item);
return this.queue.splice(index,1);
};
AnimeQ.prototype.startQueue = function () {
var inst = this;
this.timer = window.setInterval(function () {
inst.processQueue();
}, this.intv);
};
AnimeQ.prototype.stopQueue = function () {
window.clearInterval(this.timer);
this.timer = null;
};
AnimeQ.prototype.processQueue = function () {
for(var ind in this.queue) {
var item = this.queue[ind];
for (var attr in item.endProps) {
// Check if the steps are done, if so render final position
if (item.step >= item.steps) {
item.elm.style[attr] = item.endProps[attr];
item.animating = false;
} else {
var newPos = item.begProps[attr] + (item.step * item.modify[attr]);
item.elm.style[attr] = newPos + 'px';
}
if (item.animating) {
item.step++;
} else {
this.removeFromQueue(item);
}
}
}
};
AnimeQ.prototype.animate = function (itemElm, props, time) {
var item = {};
item.elm = itemElm;
item.step = 1;
item.steps = parseInt(time/this.intv, 10);
item.endProps = {};
item.begProps = {};
item.modify = {};
var style = window.getComputedStyle(item.elm, null);
for (var attr in props) {
item.endProps[attr] = props[attr];
item.begProps[attr] = parseInt(style[attr], 10);
item.modify[attr] = (parseInt(props[attr],10) - item.begProps[attr])/item.steps;
item.elm.style[attr] = style[attr];
}
this.addToQueue(item);
};
/* Here's the Animations! */
var anime = new AnimeQ();
anime.animate(document.getElementById('one'), {'left':400,'top':600}, 8000);
anime.animate(document.getElementById('two'), {'left':600,'top':250}, 2000);
anime.animate(document.getElementById('three'), {'left':250,'top':200}, 5900);
anime.animate(document.getElementById('four'), {'left':400,'top':100}, 7000);
anime.animate(document.getElementById('five'), {'left':600,'top':650}, 10500);
anime.animate(document.getElementById('six'), {'left':50,'top':10}, 4500);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment