Velocityjs - Effects
07/20/2015, Mon
Categories:
#JavaScript
Tags:
#JavaScript animations
For your heavy-duty JavaScript animations, I recommend Velocityjs since it has many features and great documentation.
Here are some simple effects that I find useful if you have chosen to use Velocityjs:
Pulsate / Throb
// Grow and Shrink Element for Five Times
$("#my-element").velocity({ scale: 2 }, { loop: 5 });
Show and Rotate
// Appear, Spins, and Disappear
// Complete animation within half a second
$("#my-element").velocity(
{ scale: 3, opacity: 1, rotateZ: "360deg" },
{ duration: 500 }
);
Stagger Elements
// Group Zoom-in
// Assumes that the UI Pack (velocity.ui.js) is in place
$(".group-of-elements").velocity("transition.whirlIn", { stagger: 500 });