Apr
28
A lot of javascript frameworks have several animations to move or style elements. I thought it was very handy to have all this kind of animations in one list so you can pick them wisely.
The 30 transition types above break down into 10 sets:
- Quad
- Cubic
- Quart
- Quint
- Expo
- Circ
- Sine
- Back
- Bounce
- Elastic
Each set has three options:
- Ease In
- Ease Out
- Ease In Out
Usage
Load this javascript when the DOM is ready.
var enterFunction = function() {
this.start('width', '600px');
}
var leaveFunction = function() {
this.start('width', '300px');
}
bounceInOut= new Fx.Tween(quadInOut, {
link: 'cancel',
transition: Fx.Transitions.Quad.easeInOut,
onStart: function(ydd){
ydd.highlight('#F47920');
},
onComplete: function(ydd){
ydd.highlight('#F5A145');
}
});
$('bounceinout').addEvents({
'mouseenter': enterFunction.bind(bounceInOut),
'mouseleave': leaveFunction.bind(bounceInOut)
});
