Fetching contributors…
Cannot retrieve contributors at this time
60 lines (39 sloc) 1.63 KB


Velocity UI Pack integration for AngularJS. Combines the power of ngAnimate with the performance and simplicity of Velocity's UI Pack!


Quick Start

  • Install via bower:
$ bower install velocity-ui-angular --save
  • Add the velocity.ui module to your application:
angular.module('yourApp', ['velocity.ui', 'ngAnimate']);
  • Use the class names on the elements you wish to animate using ng-repeat, ng-if, ng-show, ng-hide. E.g.:
<div ng-repeat="item in items" class="velocity-transition-slideDownIn velocity-duration-400">

Durations can be set on an individual basis by using the velocity-duration-400 class, where 400 is the animation duration in milliseconds.

Setting Default Options

The following options can be configured via ngVelocityConfig:


Type: String|Number

Default: 300

To configure velocity-ui-angular globally, set it via your applications config block:

angular.module('yourApp').config(function(ngVelocityConfig) {
    ngVelocityConfig.duration = 1000;


Major credit goes to @julianshapiro for creating VelocityJS which makes this wrapper-library possible.

  • @hendrixer for providing the base for CSS class-parsing code
  • @cgwyllie for providing the base for generating the 'opposite' animations