Skip to content

Instantly share code, notes, and snippets.

@awayken
Created April 18, 2011 05:34
Show Gist options
  • Save awayken/924863 to your computer and use it in GitHub Desktop.
Save awayken/924863 to your computer and use it in GitHub Desktop.
/**
* @constructor Animate
* @param {HTMLElement} el the element we want to animate
* @param {String} prop the CSS property we will be animating
* @param {Object} opts a configuration object
* object properties include
* from {Int}
* to {Int}
* time {Int} time in milliseconds
* callback {Function}
*/
function Animate(el, prop, opts) {
this.el = el;
this.prop = prop;
this.from = opts.from;
this.to = opts.to;
this.time = opts.time;
this.callback = opts.callback;
this.animDiff = this.to - this.from;
}
/**
* @private
* @param {String} val the CSS value we will set on the property
*/
Animate.prototype._setStyle = function(val) {
switch (this.prop) {
case 'opacity':
this.el.style[this.prop] = val;
this.el.style.filter = 'alpha(opacity=' + val * 100 + ')';
break;
default:
this.el.style[this.prop] = val + 'px';
break;
};
};
/**
* @private
* this is the tweening function
*/
Animate.prototype._animate = function() {
var that = this;
this.now = new Date();
this.diff = this.now - this.startTime;
if (this.diff > this.time) {
this._setStyle(this.to);
if (this.callback) {
this.callback.call(this);
}
clearInterval(this.timer);
return;
}
this.percentage = (Math.floor((this.diff / this.time) * 100) / 100);
this.val = (this.animDiff * this.percentage) + this.from;
this._setStyle(this.val);
};
/**
* @public
* begins the animation
*/
Animate.prototype.start = function() {
var that = this;
this.startTime = new Date();
this.timer = setInterval(function() {
that._animate.call(that);
}, 4);
};
/**
* @static
* @boolean
* allows us to check if native CSS transitions are possible
*/
Animate.canTransition = function() {
var el = document.createElement('foo');
el.style.cssText = '-webkit-transition: all .5s linear;';
return !!el.style.webkitTransitionProperty;
}();
if (Animate.canTransition) {
el.style.webkitTransition = 'opacity 0.5s ease-out';
el.style.opacity = 1;
}
new Animate(el, 'opacity', {
from: 0,
to: 1,
time: 500,
callback: done
}).start();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment