--- name: motion-ui url: /motion-ui controller: MotionUIController title: Motion UI ---

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.

Sass Mixins

All of our motion classes are built using mixins, which you can use yourself to write custom, fine-tuned animations.

Slide

A sliding element can originate from any of the element's four sides, and optionally fade in and out as it slides.

.customSlideIn { @include slide( $dir: in, // Specify in or out $from: left, // Can be top, right, bottom, or left $fade: true, // If true, the element fades simultaneously $duration: 0.5s, $timing: easeIn, $delay: 0.25s ); }

Fade

Fading in and out works how you'd expect.

.customFadeIn { @include fade( $dir: in, // Specify in or out $from: 0, // Should be an opacity value between 0 and 1 $to: 1, // Same as above $duration: 0.5s, $timing: easeIn, $delay: 0.25s ); }

Hinge

To create a hinge swing effect, specify the direction of the hinge, the axis to swing on, and the direction to swing.

.customHingeIn { @include hinge( $dir: in, // Specify in or out $from: left, // Can be top, right, bottom, or left $axis: edge, // The swing can happen from the edge or center $perspective: 2000px, // A higher number will make the effect more pronounced $turn-origin: from-back, // The element can swing from its front or back side $fade: true, // If true, the element fades simultaneously $duration: 0.5s, $timing: easeIn, $delay: 0.25s ); }

Scale

Specify a start and end amount to scale, and optionally have the element fade in or out as well.

.customScaleIn { @include scale( $dir: in, // Specify in or out $from: 0.5, // 0.5 = 50% of the element's normal size $to: 1.5, // 1.5 = 150% $fade: true, // If true, the element fades simultaneously $duration: 0.5s, $timing: easeIn, $delay: 0.25s ); }

Spin

To create a spinning element, specify the distance the element spins and what direction it goes. The turn amount uses the turn unit—

.customSpinIn { @include spin( $dir: in, // Specify in or out $amount: 0.75turn, $ccw: false, // True makes the element spin counterclockwise $fade: true, // If true, the element fades simultaneously $duration: 0.5s, $timing: easeIn, $delay: 0.25s ); }

Sass Variables

The mixins allow you to fine-tune each animation, but you can also use the Sass settings variables to adjust global motion settings.