How to Create Animations and Transitions with Motion UI

Animations and transitions allow designers to visualize change and differentiate content. Animations and transitions are moving effects that help users recognize when something changes on the site, for example they click on a button and a new piece of information appears on the screen. Adding movement to apps and websites improves user experience, as it allows users to make sense of content in a more intuitive way.

We can create animations and transitions either from scratch or by using libraries or frameworks. Good news for us, frontend folks, is that Zurb, the creator of Foundation, last October open-sourced Motion UI, its animation and transition library based on Sass.

It was originally bundled with Foundation for Apps, and now, for the standalone release it got a revamp, including an animation queueing system and flexible CSS patterns. Motion UI also powers some components of the Foundation framework, such as the Orbit slider, the Toggler switcher, and the Reveal modal, so it’s a pretty robust tool.

Getting Started

Although Motion UI is a Sass library, you don’t necessarily need to use it with Sass, as Zurb provides developers with a handy starter kit that contains only the compiled CSS. You can download it from Motion UI’s home page, and quickly start to prototype by using the predefined CSS animation and transition classes.

The starter kit doesn’t only contain the Motion UI, but the Foundation framework as well, which means you can use the Foundation grid and all the other functionalities of Foundation for Sites if you want.

The starter kit is also shipped with an index.html file that allows you to quickly test the framework.

If you need more sophisticated adjustments and want to take leverage of Motion UI’s powerful Sass mixins, you can install the full version containing the source .scss files with npm or Bower.

Motion UI’s documentation is currently half-baked still. You can find it here on Github, or contribute to it if you want.

Quick Prototyping

To start prototyping, you can edit the index.html file of the starter kit, or create your own HTML file. You can build the layout by using the Foundation grid, but Motion UI also can be used as a standalone library without the Foundation framework.

There are 3 main types of predefined CSS classes in Motion UI:

  1. Transition Classes – make it possible to add transitions, such as sliding, fading, and hinging effects to an HTML element.
  2. Animation Classes – enable you to use different shaking, wiggling and spinning effects
  3. Modifier Classes – work together with both transition and animation classes, and they let you adjust the speed, the timing, and the delay of a movement.

Building the HTML

The great thing about predefined CSS classes is that they can’t only be used as classes but also as other HTML attributes. For example you can add them to the value attribute of the <option> tag, or you can use them in your own custom data-* attribute as well.

In the code snippet below I chose this latter option to separate behaviour and modifier classes. I used the slow and ease modifier attributes as classes, and created a custom data-animation attribute for the scale-in-up transition. The Click me button is meant to trigger the effect.

<div class="transitions">

  <button type="button">Click Me</button>
  
  <img id="boom" data-animation="scale-in-up" 
  class="slow ease" src="#" alt="#">
 
</div>

Playing Animations and Transitions with jQuery

Motion UI includes a small JavaScript library as well that can play transitions and animations when a certain event happens.

The library itself can be found in the starter kit in the motion-ui-starter > js > vendor > motion-ui.js path.

It creates a MotionUI object that has two methods: animateIn() and animateOut(). The transition or animation bound to the particular HTML element (the <img id="boom"> tag in our example) can be triggered with jQuery in the following way:

$(function() {

 $(".button").click(function() {

  var $animation = $("#boom").data("animation");

  MotionUI.animateIn($("#boom"), $animation);

 });

});

In the code snippet above, we accessed the data-animation attribute by using jQuery’s built-in data() method, then called the animateIn() method of the MotionUI object.

Here is the full code and the result. I used Foundation frameworks’s built-in button classes for the Click me button, and added some basic CSS as well.

As Motion UI is quite flexible, you can also add and trigger transitions and animations in many other ways.

For example in the example above we don’t necessarily need to use the data-animation custom attribute, but can simply add the behaviour class with the addClass() jQuery method to the <img id="boom"> element in the following way:

$('#boom').addClass('scale-in-up');

Customization with Sass

Motion UI’s pre-made CSS classes use default values that can be easily customized with the help of Sass. There is a Sass mixin behind each transition and animation, that makes it possible to change the settings of the effect. This way you can easily create a fully custom animation or transition.

Customization won’t work with the starter kit though, you need to install the Sass version if you want to configure the effects according to your own needs.

To customize a transition or animation, at first you need to find the related mixin. The _classes.scss file contains the names of the compiled CSS classes with the respective mixins.

In our example we used the .scale-in-up attribute, and by taking a look at _classes.scss, we can quickly find out that it makes use of the mui-zoom mixin:

// Transitions
@mixin motion-ui-transitions {
 
 ...

 // Scale
 .scale-in-up  { @include mui-zoom(in, 0.5, 1); }

 ...
}

Motion UI uses the mui- prefix to mixins, and each mixin has its own file. Motion UI has pretty self-explanatory naming conventions, so we can quickly find the mui-zoom mixin in the _zoom.scss file:

@mixin mui-zoom(
  $state: in,
  $from: 1.5,
  $to: 1,
  $fade: map-get($motion-ui-settings, scale-and-fade),
  $duration: null,
  $timing: null,
  $delay: null
) { ... }

Using the same technique you can easily control every feature of an animation or transition by changing the values of the respective Sass variables.

Configuring Modifier Classes

Modifier classes that control the behaviour (speed, timing, and delay) of animations and transitions are also configurable with Sass by modifying the values of the respective variables in the _settings.scss file.

After you make your changes, Motion UI will use the new values as the default in every animation and transition, so you won’t have to configure the related mixins one by one.