Motion UI

A Sass library for creating flexible CSS transitions and animations.

Download Starter Kit Read Documentation

Motion UI's built-in effects make animating your UI a snap.

Click a class and watch the Yeti animate!

Motion UI is a Sass library for quickly creating CSS transitions and animations. We originally bundled this code with Foundation for Apps, but we've souped it up, made it its own library, and open sourced it ahead of the launch of Foundation for Sites 6.


Getting Started

Install Motion UI with Bower or npm. The package includes a CSS file with a bunch of premade transitions and animations, along with the source Sass files, which allow you to build your own.

bower install motion-ui --save
npm install motion-ui --save

Motion UI includes a bundle of pre-made effects as CSS classes. This includes transition effects to slide, fade, hinge, scale, and spin, as well as a few built-in animations. You can preview the effects above, or head to the Motion UI documentation to see the full list.

But where it really gets fun is creating your own effects.


Transitions

The core function of Motion UI is to transition components in and out. You can apply these transitions to overlays, off-canvas menus, modals, and more.

Show a Thing

The Motion UI package includes a small JavaScript library to trigger these transitions. Just pass it an element and a motion class.

MotionUI.animateIn('#element', 'fade-in');

// You can also pass a callback that runs when the transition finishes
MotionUI.animateOut('#element', 'fade-out', function() {
  console.log('Transition done!');
});

Transitions are highly customizable. Each effect includes a Sass mixin that lets you control every aspect of it, from direction to speed to easing. Here's an example using the hinge effect:

@include mui-hinge(
  $state: in,
  $from: left,
  $axis: center,
  $perspective: 2000px,
  $turn-origin: from-back
);

Animations

The same effects used for transitions can also be used to build CSS animations. All animations are created with the mui-animation() mixin. You pass the mixin one or more effects, which are combined into one set of keyframes.

Click me for a weird effect!
// Use the default slide effect
.slide {
  @include mui-animation(slide);
}

// Create a custom slide effect
.slide {
  @include mui-animation(slide($direction: up, $amount: 120%));
}

// Combine multiple effects
.slideAndSpinAndFade {
  @include mui-animation(fade, spin, slide($direction: up, $amount: 120%));
}

Series Animations

Animation effects can be played in series. This allows you to take multiple elements and animate in them in a set order.

To start, all of your elements need a common parent. You'll add a special class to this parent to trigger the animations.

<div class="parent">
  <div class="thing-one"></div>
  <div class="thing-two"></div>
  <div class="thing-three"></div>
</div>

Use the mui-series mixin to start the queue.

@include mui-series {
    // ...
    }

Inside this mixin, apply the mui-queue mixin to individual elements. You can pass in an effect, a duration for the animation, and optionally a gap, which creates a pause between that animation and the next one.

@include mui-series {
  .thing-one {
  @include mui-queue(1s, 0s, fade);
  }

  // A 2s pause will happen after this animation ends
  .thing-two {
  @include mui-queue(1s, 2s, slide($direction: right));
  }

  // It works with multiple effects, too!
  .thing-three {
  @include mui-queue(2s, 0s, spin($direction: ccw), slide($direction: up));
  }
}

Lastly, to trigger the queue, add the class .is-animating to a parent element. This is easy to do in jQuery:

$('.parent').addClass('is-animating');

Full Documentation

Head over to the full Motion UI documentation to learn more about the particulars of the transition effects, animation functions, and more.

View Motion UI Documentation

Thoughts?

Let us know what you think about Motion UI in the comments of our blog post on the Playground piece.

Stay Up to Date

We'll keep you up-to-date on the progress of Foundation for Sites 6.

Wanna Contribute?

Motion UI currently ships with five effects that we feel are core to UI design. However, the library was built to be extended with new effects and fancier animations. If you want to contribute, head on over to GitHub and pull down the code!

Browser Support

We tested Motion UI in these browsers:

  • Chrome
  • Firefox
  • Safari
  • IE 10+
  • iOS 8+
  • Android 4+

Transitions and animations are not supported in IE 9. The JavaScript plugin will simply show and hide the element if transitions/animations are not supported.

Startup playground

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×