Motion UI

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.

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.

// 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.