Motion UI

Now you can rapidly prototype animated elements that integrate seamlessly into your site! We're using Sass mixins, CSS animations and transitions to make some really neat effects.


Transitions


Animations

class="square linear {{animateSquare}}"


Animating Components

Modals, notifications, and panels can be animated with the above motion classes. To add animation, use the `animation-in` and `animation-out` attributes.

If you don't speficy an animation, the component will use a default. For example, a left-oriented panel will animate in to the right, and out to the left.


Animating Views

Views can be animated in and out as the user moves between pages. There are two ways to define these transitions. To set it using our routing plugin, add the animation classes to the front matter of your view template.

--- name: home url: / animationIn: slideInRight animationOut: slideOutRight ---

Both properties are optional, but the effects look their best when both views have an in and out animation.

If you're using ui-router directly, you can pass in these same parameters when defining a state.

function config($stateProvider) { $stateProvider.state('home', { url: '/', templateUrl: 'templates/home.html', animation: { enter: 'slideInRight', leave: 'slideOutRight' } }); }

Other Angular Directives

Our motion classes also work with any built-in Angular directive that supports ngAnimate, such as ng-show, ng-hide, ng-if, and ng-repeat Just add a motion class to the element with the directive.

Click me:

This text will slide in and out.