Pre-defined animations using 10 animation steps, based on the work of this 2 guys:
Daniel Eden http://daneden.me/animate/
Louis Remi http://louisremi.github.com/jquery.transform.js/index.html
Included animations
- Bounce
- Shake
- Tada
- Swing
- Wobble
- Wiggle
- Pulse
- Bounce in
- Bounce in up
- Bounce in down
- Bounce in left
- Bounce in right
- Lightspeed in
- Roll in
- Roll out
-
Download and set the jQuery transfrom plugin from http://louisremi.github.com/jquery.transform.js/index.html
-
Change these 2 vars to fit your needs
var$element = $ ('.myClass'); // your jQuery selector
var chosenFx = 'rollOut'; // the effect name camelCased
$element.animate(fxPattern[0], fxPattern[1], fxPattern[2]); // wherever you want it to be triggered
If you want to override/add an effect, you can just do the following:
fx.myNewEffect = {
step0: 'your transform effect at 0%',
step1: 'your transform effect at 10%',
step2: 'your transform effect at 20%',
step3: 'your transform effect at 30%',
step4: 'your transform effect at 40%',
step5: 'your transform effect at 50%',
step6: 'your transform effect at 60%',
step7: 'your transform effect at 70%',
step8: 'your transform effect at 80%',
step9: 'your transform effect at 90%',
step10: 'your transform effect at 100%'
}
That's it.
var
var chosenFx = 'bounceInRight';
// let's bind it to some button
$('.myButton').on('click', function() {
$element.animate(fxPattern[0], fxPattern[1], fxPattern[2]); // wherever you want it to be triggered
});