Velocity.js

// With jQuery/Zepto
$element.velocity({ opacity: 0.5 }, { duration: 1000 });

// Without jQuery (utility function)
Velocity(element, { opacity: 0.5 }, { duration: 1000 });

// Comma-separated shorthand
$element.velocity({ top: 50 }, 1000, "swing");
$element.velocity({ top: 50 }, 1000, function () {
  // done callback
});

$element.velocity({
  properties: { opacity: 1 },
  options: { duration: 500 },
});

# NPM
npm install velocity-animate

# CDN
<script src="//cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>

Must specify axis explicitly.

$element.velocity({
  translateX: "200px",
  translateY: "100px",
  translateZ: 0, // Hardware acceleration
  rotateZ: "45deg",
  rotateX: "90deg",
  scale: 1.5,
  scaleX: 1.5,
  skewX: "10deg",
});

$element.velocity({
  backgroundColor: "#ff0000",
  color: "#00ff00",
  colorRed: "50%",
  colorAlpha: 0.85,
});

Only hex strings supported.

$svgElement.velocity({
  x: 200,
  y: 100,
  cx: 50,
  cy: 50,
  r: 25,
  strokeWidth: 5,
  fill: "#ff0000",
  fillOpacity: 0.8,
});

$element.velocity(
  { width: "500px" },
  {
    duration: 400, // ms or "slow"/"normal"/"fast"
    easing: "swing", // Easing function
    queue: "", // false or queue name
    delay: false, // ms
    loop: false, // integer or true
    display: undefined, // "none", "block", "auto"
    visibility: undefined,
    mobileHA: true, // Mobile hardware accel
  },
);

$element.velocity(
  { opacity: 0 },
  {
    begin: function (elements) {
      // Animation starts
    },
    complete: function (elements) {
      // Animation ends
    },
    progress: function (elements, complete, remaining, start, tweenValue) {
      console.log(complete * 100 + "%");
      console.log(remaining + "ms remaining");
    },
  },
);

// jQuery UI easings (built-in)
$element.velocity({ width: 50 }, "easeInSine");
$element.velocity({ width: 50 }, "easeOutQuad");
$element.velocity({ width: 50 }, "easeInOutCubic");

// CSS3 named easings
$element.velocity({ width: 50 }, "ease-in-out");

// Custom bezier curve [x1, y1, x2, y2]
$element.velocity({ width: 50 }, [0.17, 0.67, 0.83, 0.67]);

// Spring physics [tension, friction]
$element.velocity({ width: 50 }, [250, 15]);

// Step easing [steps]
$element.velocity({ width: 50 }, [8]);

$element.velocity({
  borderBottomWidth: ["2px", "spring"],
  width: ["100px", [250, 15]],
  height: ["100px", "easeInSine", "0px"],
});

$element.velocity({
  top: 50, // px assumed
  left: "50%",
  width: "+=5rem", // Add
  height: "-=10px", // Subtract
  opacity: "*=2", // Multiply
  fontSize: "/=2", // Divide
});

Set start value explicitly.

// Two-item array: [endValue, startValue]
$element.velocity({
  top: [500, 0],
  opacity: [0, 1],
});

// Three-item array: [endValue, easing, startValue]
$element.velocity({
  opacity: [0, "easeInSine", 1],
});

$element.velocity("stop"); // Stop current
$element.velocity("stop", true); // Stop + clear queue

$element.velocity({ opacity: 0 });
$element.velocity("reverse");
$element.velocity("reverse", { duration: 2000 });

$element.velocity("finish"); // Jump to end values
$element.velocity("finish", true); // Finish + clear queue

$element.velocity("pause");
$element.velocity("resume");

Available in V1.4+.

$element.velocity("scroll", {
  duration: 1000,
  offset: 250,
  axis: "y",
  container: $("#container"),
});

$element.velocity("fadeIn", { duration: 1500 });
$element.velocity("fadeOut", { duration: 1500 });

$element.velocity("slideDown", { duration: 1500 });
$element.velocity("slideUp", { duration: 1500 });

$element.velocity({ width: 75 }).velocity({ height: 0 });

// Run in parallel (bypass queue)
$element.velocity({ height: "50px" }, { queue: false });

// Custom named queue
$element.velocity({ opacity: 0 }, { queue: "myQueue" });
$element.dequeue("myQueue");

$.Velocity.RunSequence([
  {
    elements: $el1,
    properties: { opacity: 1 },
    options: { duration: 1000 },
  },
  {
    elements: $el2,
    properties: { opacity: 1 },
    options: { duration: 1000 },
  },
]);

V1 only.

<script src="//cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.ui.min.js"></script>

Requires Velocity core.

$element.velocity("callout.bounce");
$element.velocity("callout.shake");
$element.velocity("callout.flash");
$element.velocity("callout.pulse");
$element.velocity("callout.tada");

// Transition.In
$element.velocity("transition.fadeIn");
$element.velocity("transition.slideLeftIn");
$element.velocity("transition.slideUpIn");

// Transition.Out
$element.velocity("transition.fadeOut");
$element.velocity("transition.slideRightOut");

$.Velocity.RegisterEffect("myEffect", {
  defaultDuration: 1000,
  calls: [
    [{ opacity: 0.5 }, 0.5],
    [{ opacity: 1 }, 0.5],
  ],
});

$element.velocity("myEffect");

// Set display AFTER animation (fade out)
$element.velocity({ opacity: 0 }, { display: "none" });

// Set display BEFORE animation (fade in)
$element.velocity({ opacity: 1 }, { display: "block" });

// Auto-detect native display
$element.velocity({ opacity: 1 }, { display: "auto" });

$element.velocity({ height: "10em" }, { loop: 2 }); // Loop 2 times
$element.velocity({ height: "10em" }, { loop: true }); // Infinite

Velocity(element, { opacity: 0.5 })
  .then(function (elements) {
    console.log("Resolved.");
  })
  .catch(function (error) {
    console.log("Rejected.");
  });

V2 utility function only.

• Transform caching: Velocity ignores outside CSS changes to transform values. Use force-feeding for initial transforms.
• Multi-value properties: Cannot pass { padding: "1 1 1 1" } - must use individual properties like { paddingLeft: 1, paddingRight: 1 }.
• Color format: Only hex strings (#ff0000) supported. No RGB/HSL/keywords.
• Loop + custom queues: Loop option and reverse do NOT work with custom queues or queue: false.
• jQuery vs standalone: With jQuery returns jQuery object (chaining). Without jQuery must use Velocity(element, ...) for promise support.