Motion UI includes a small JavaScript library that can play transitions, although this specific library is not required to take advantage of Motion UI’s CSS. Animating in reveals a hidden element, while animating out hides a visible element.

The library is available on window.MotionUI, or can imported with a module system.


The MotionUI object has two methods: animateIn() and animateOut(). Both functions take three parameters:

Here’s an example:

var $elem = $('[data-animate]');

MotionUI.animateIn($elem, 'slide-in', function() {
  console.log('Transition finished!');

What about animations? Those can be triggered just by adding the animation class to an element. Here are examples with plain JavaScript and with jQuery:

// Plain JavaScript (IE10+)

// jQuery