Velocity UI integration for AngularJS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.gitignore chore(release): 0.0.5 Jul 4, 2014
Gruntfile.js Migrate to new repo Jul 14, 2014 Update bower dependencies Mar 10, 2016
bower.json Update version Mar 10, 2016


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