How Motion UI is the new cool for website transitions


Perhaps the sassiest library that helps in bringing the zing to your website using snappy animations and transition effects. Don’t worry if you’re new to this coz we’ve got it for you!

In recent times websites have a huge difference in designs that go way beyond the conventional definitions of website designs and layout. The simpler and sleek, the better! Having originated from Foundation of Apps as a bundle, this library has an enormous collection of animation and transition effects that is flexible enough to work with almost any Javascript animation library. The best part, you’d ask, will be undoubtedly the availability of the platform to create newer designs!

Getting Started 101

Let’s go about this by one step at a time:


  • Install motion ui with npm and bower with the following codes:
    npm install motion-ui –save-dev
    bower install motion-ui –save-dev
  • The package contains a set of default source files for transitions and animations to help you get the hang of it. Here’s the link of all the source codes
  • For adding a path for Motion UI Library in the compass insert the following code:
    add_import_path ‘node_modules/motion-ui/src’
  • In case you’ve gulp-sass write:
    .pipe(sass( {
    includePaths: ['node_modules/motion-ui/src']
  • For importing the Motion UI in the sass library write:
    @import 'motion-ui'


The transitions are the USP of Motion UI which can be implemented on transition to overlays, off-canvas and modules. Examples are enclosed below:

Built-in Transitions

These are the type of transitions that comes all set with the package to help you as a reference. Here’s the example:

<!doctype html>


<meta charset = “utf-8” />

<meta http-equiv = “x-ua-compatible” content = “ie = edge” />

<meta name = “viewport” content = “width = device-width, initial-scale = 1.0” />

<title>Motion UI Transition</title>

<link rel = “stylesheet” href = “”>

<link rel = “stylesheet” href = “”>

<script src = “”></script>

<script src = “”></script>



<h2>Motion UI Transition Example</h2>

<p><a data-toggle = “toggle_panel”>Click here to toggle the panel</a></p>

<div class = “callout” id = “toggle_panel” data-toggler data-animate = “hinge-in-from-bottom spin-out”>


<p>Foundation is semantic, readable, flexible, and completely customizable.</p>



$(document).ready(function() {






Custom Transitions:

Creating your own transitions is the real fun and is something Motion UI is known for. Here’s an example of how to set custom classes for mui-hinge() transition, which rotates the element.

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


Animation effects are the best to play with using CSS and can be implemented with mui – animation( ) mixin. Either you can pass a mixin one or more effects that are created into one keyframes, or you develop it locally.

// 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%));

For Series Animation, the following code needs to be implemented:
*All animations need to be from a common parent and then needs to have a special class to the parent to trigger animations:

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

Add the mui-series class,

@include mui-series {
// ...

Applying the mui-queue mixin,

@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));

For triggering the queue, add the class .is-animating to a parent query. Doing it in jQuery, the code will be as follows:
As we mentioned earlier, the motion UI works fine as long as there is seamless jQuery included:

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

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

*Make sure to include the js/foundation.util.motion.js path and it shall work once the animation is complete.

Phhew. That was some work! Once you get started with these codes, you’re sure gonna roll with it. Share with us how was your Motion UI experience in the comments down below!

Why should you consider having a responsive website?

Today, the internet isn’t just limited to the desktop. With the rise in the number of smartphone users, more and more individuals browse the web solely through smartphones.Can you think […]

Read More
Exploring Some Useful Tips for Website Redesign

It is a fact that a poor web design can significantly hurt your sales and conversions. If you think you have an unattractive site, then it’s time to think about […]

Read More
How can a good UI design promote a software’s success?

A functional, attractive, and straightforward software user interface (UI) can make a significant distinction in a product’s failure or success. But still, user interface design is often ignored by both […]

Read More