Motion UI

Library

A Sass library for creating flexible UI transitions and animations.

Motion UI is a standalone library that powers the transition effects used in a number of Foundation components, including Toggler, Reveal, and Orbit.


Installing

Motion UI is already included in both starter projects. If you want to add it to an existing project, follow these steps.

First, install the library with npm or yarn.

npm install motion-ui --save-dev
yarn add motion-ui

Next, add the path [modules_folder]/motion-ui/src to your Sass compiler's import path list. Here's what you would add in Compass, via config.rb:

add_import_path 'node_modules/motion-ui/src'

Here's how it works using gulp-sass:

gulp.src('./src/scss/app.scss')
  .pipe(sass({
    includePaths: ['node_modules/motion-ui/src']
  }));

Finally, import the library into your Sass file and include the mixins.

@import 'motion-ui'
@include motion-ui-transitions;
@include motion-ui-animations;

Or, another way to start using Motion UI is through a CDN.

<!-- Insert this within your head tag and after foundation.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/motion-ui@1.2.3/dist/motion-ui.min.css" />

Usage in Components

Various Foundation components provide options for to use Motion UI animations when changing state. Here are the options for each plugin that support Motion UI:

For example, here are two instances of Toggler—one using fade classes (.fade-in and .fade-out), and one using slide classes (.slide-in-down and .slide-out-up). See all available classes in build-in transitions below.

<div data-toggler data-animate="fade-in fade-out" class="callout secondary">
  <p>This panel fades.</p>
</div>

<div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary">
  <p>This panel slides.</p>
</div>

This panel fades.

This panel slides.


Built-in Transitions

Motion UI includes more than two dozen built-in transition classes. They can be enabled by adding this line to your Sass file, after you've imported the library:

@include motion-ui-transitions;

Custom Transitions

Custom transition classes can be made using Motion UI's mixin library. Here's an example of a custom hinge. Refer to Motion UI's transition documentation to learn more.

@include mui-hinge(
  $state: in,
  $from: top,
  $turn-origin: from-back,
  $duration: 0.5s,
  $timing: easeInOut
);

Animation

You can use the same five transition effects to create CSS animations as well. The library also allows you to create series effects, with animations on multiple elements happening in a queue. Refer to Motion UI's animation documentation to learn more.


JavaScript Reference

Motion UI includes a tiny JavaScript utility that will work anywhere as long as jQuery is loaded. However, Foundation 6 includes a customized version of this code that is included in js/foundation.util.motion.js. If you are using the Foundation version of this utility, and you wish to animate your own elements, trigger it this way:

var elem = $('#elem-to-animate');

Foundation.Motion.animateIn(elem, animationClass [, callback]);
Foundation.Motion.animateOut(elem, animationClass [, callback]);

The callback is optional in this case, and will fire when the animation is complete.

Please note that the duration/animation speed for Motion UI animations are controlled via Sass mixin variables. The JavaScript handles the addition and removal of classes and event listener/callback firing only.
If you are individually including your <script> tags, make sure you are including the js/foundation.util.motion.js path.