Motion UI

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

Animate!

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:

• Orbit: data-animate
• Reveal: data-animation-in, data-animation-out
• Toggler: data-animate
• Responsive Toggler: data-animate

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>

FadeSlide

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;

slide-in-down slide-in-left slide-in-up slide-in-right slide-out-down slide-out-left slide-out-up slide-out-right fade-in fade-out hinge-in-from-top hinge-in-from-right hinge-in-from-bottom hinge-in-from-left hinge-in-from-middle-x hinge-in-from-middle-y hinge-out-from-top hinge-out-from-right hinge-out-from-bottom hinge-out-from-left hinge-out-from-middle-x hinge-out-from-middle-y scale-in-up scale-in-down scale-out-up scale-out-down spin-in spin-out spin-in-ccw spin-out-ccw

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.

Play Animation

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.