If you would like to see the source code it is on github.
I set up a lightweight angular starter template with ui-router and no clunky build system. Clone it and add the ngFx module, TweenMax library and the ngAnimate module to take care of dependencies. You could also use bower if that is easier for you. Add the modules to the app.
var app = angular.module('ngfx-demo', [
So to start off we're going to click a button and show a login form. I set up an additional state with the same controller.
Then made a basic login form with a show form button.
<div class='row text-center'>
<div class='btn btn-success' ng-click='showForm = !showForm'>Show form</div>
<div id='loginBox' ng-show='showForm' class='col-sm-offset-4 col-sm-4 img-rounded fx-fade-down'>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
<input type="checkbox" value="remember-me"> Remember me
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
Then there's the controller
$scope.showForm = false;
And a little bit of css to prettify (not to animate).
box-shadow: 10px 10px 5px #888888;
So out of all that code and markup, the only bit that added animation was the
fx-fade-down class on the html form's parent. The module uses the fx namespace, so any class prefixed with
All dynamic animations tie into ngAnimate hooks. So you can apply them to...
- ng-hide / ng-show
- ui-view (if you're using ui.router)
This means that these directives are all "animate aware"<sup><u>1</u></sup>. So when the ng-show binding changes a fade down animation occurs on the element. Right now we trigger the change by clicking an element. So far it's pretty cool.
<small>Pro tip: With bootstrap
<div class="img-rounded"> will give you rounded corners on any element.</small>
Animate all the things
So looking at the list above, we can add animations for every time a page comes in. In index.html
<div ui-view class='fx-bounce-right'></div>
We can add more complex animations with easings, speeds, directives and event hooks. This is a basic introduction to how to use this module for a project.
The source code is HERE. If you would like to build on this please submit a pull request!