--- 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}}"


Motion Classes

Transitions

.{{class}}

Animations

.shake

.spin-cw

.spin-ccw

.shake

.wiggle

Modifiers

.slow

.fast

Easing

.{{speed}}

Delay

.delay

.long-delay

Duration

.slow

.fast


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.

// Classes to use when triggering in/out animations $motion-class: ( in: "ng-enter", out: "ng-leave", ); $motion-class-active: ( in: "ng-enter-active", out: "ng-leave-active", ); // Set if movement-based transitions should also fade the element in and out $motion-slide-and-fade: false; $motion-hinge-and-fade: true; $motion-scale-and-fade: true; $motion-spin-and-fade: true; // Default speed for transitions and animations $motion-duration-default: 700ms; // Slow and fast modifiers $motion-duration-slow: 1.4s; $motion-duration-fast: 300ms; // Default timing function for transitions and animations $motion-timing-default: ease; // Built-in and custom easing functions // Every item in this map becomes a CSS class $motion-timings: ( linear: linear, ease: ease, easeIn: ease-in, easeOut: ease-out, easeInOut: ease-in-out, bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245), bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845), bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245), ); // Default delay for all transitions and animations $motion-delay-default: 0; // Short and long delay modifiers $motion-delay-short: 300ms; $motion-delay-long: 700ms;