Need help with angular-velocity?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

cgwyllie
129 Stars 16 Forks MIT License 43 Commits 9 Opened issues

Description

AngularJS ngAnimate integration for Velocity's UI pack plugin.

Services available

!
?

Need anything else?

Contributors list

Angular Velocity

AngularJS ngAnimate integration for the Velocity animation library's UI pack plugin.

Getting Started

Install with Bower

bower install angular-velocity --save

Include Scripts


N.B. angular-velocity assumes that the Angular core and the additional

ngAnimate
module is loaded.
ngAnimate
can be found in the AngularJS 'additional modules'.

Install with npm

npm install angular-velocity --save

Include Scripts


N.B. When installing from npm, it is assumed that VelocityJS will be installed and loaded before Angular Velocity.

N.B. angular-velocity assumes that the Angular core and the additional

ngAnimate
module is loaded.
ngAnimate
can be found in the AngularJS 'additional modules'.

Declare Angular Dependency

angular.module('your-app', ['angular-velocity']);

Usage

This module declares Angular animations for each of the animations in the UI pack of Velocity following a standardised naming convention.

From Velocity, the period in a transition or callout name is replaced by a hyphen. For example,

transition.slideUpIn
becomes
velocity-transition-slideUpIn
.

This animation name is then used as a class name on any element you want to animate with the ngAnimate system, for example:

I've been animated with Velocity and Angular!

Opposites

Angular Velocity defines opposite animations for all animations that have a 'directional' component. For every 'In' transition, there is an opposite 'Out' transition that can be used.

These are defined with the prefix

velocity-opposites-
and will work with ngAnimate's enter & leave, and ngShow & ngHide.

For example:

I enter with a transition.slideUpIn.
I leave with a transition.slideDownOut.

Different Enter & Leave Animations

Angular Velocity defines an enter animation for every 'In' transition, and a leave animation for every 'Out' transition.

These are defined with the prefixes

velocity-enter-
and
velocity-leave-
, which work with ngEnter & ngShow, and ngLeave & ngHide respectively.

For example:

I enter with a transition.slideRightIn.
I leave with a transition.slideDownOut.

You do not have to use an enter and a leave transition, they are independednt and you can specify them separaetly if desired.

Velocity Options

Setting Velocity options is possible by defining the

data-velocity-opts
attribute on your animated element. This is an Angular-aware expression, so you can pass objects, bindings, or references to scope objects:
I've been animated with Velocity and Angular!

Stagger

Staggering is supported for

ngEnter
and
ngLeave
animations. This works especially well with
ngRepeat
:
  • {{ item }}

Complete Function

The Velocity

complete
callback can be passed in the options and will be executed against your element's scope in a digest cycle.

Contributing

Please feel free to fork, push, pull and all that other good Git stuff!

Compression

uglifyjs angular-velocity.js -c -m -r '$,angular' --source-map angular-velocity.min.map -o angular-velocity.min.js

Disclaimer

This project is not associated officially with either AngularJS or Velocity. It is just a little utility that was quickly thrown together to bridge an animation-shaped gap.

Thanks

  • @albertogasparin for allowing registration of custom transitions after script load time
  • @MikaAK for jQuery dependency removal
  • @tvararu for updates to work with Velocity 1.x
  • @rosslavery for an example of how to access UI pack animations

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.