Motion User Interface

The animations and the transitions allows the Designers to visualize the changes and then differentiate the content.  The animations and transitions are moving effect that helps the users to recognize when something changes on the his/her site, 

A Sass library is used for creating the flexible UI-transitions and the animations. Motion UI is the standalone library that provide the power of transition effects that are used in a number of Foundation-components, including the Toggler, Reveal, etc.

How to Install on your Workstation:

Install the Motion-UI with the Bower or npm. This package include the CSS files with bunch of the pre-provided transitions and the animation along with source of/or the Sass files, which allows us to build.

bower install motion-ui --save
npm install motion-ui --save

Motion-UI includes the bundle of pre-provided effects as the CSS class. These includes the transition effect to slide, hinge, fade, scale and spin as well as the few built-in anim-Lastly, to trigger these queues, add class .is-animating to the parent elements.

It really gets fun in creating our very own effects.

The 3 main type of the predefined CSS classes in the Motion-UI:

Transition Class – make it possible to add transitions, such as fading, sliding and the hinging effects to an HTML element.

Animation Class – enable the use of different wiggling, shaking and the spinning effects

Modifier Class – works together with both the transition animation and transition classes, and then lets you adjust the timing, the speed, and delay of movement.

The great thing about the pre-made CSS class is they can’t only be used as class but also as the other HTML attribute.

Here is the HTML code:

< forexample_button type="buLastly, to trigger the queue, add the class .is-animating to a parent element. This is easy to do in the jQuery:tton">Click Here

And the jQuery code:

 $(function() { 
$(".btn").click(function() 
{ var $animations = $("#boom").data("animations"); 
MotionUI.animatesIn($("#boom"), $animations); });
 });

Transitions:

The main function of the Motion-UI is the transition component in & out. These can apply the transitions to off-canvas menu, modals, overlays, and many more.

Motion-UI package includes a very small JavaScript library that triggers these transition. We have to just pass an element & a motion class.

Motion-UI.animatesIn('#elements', 'fade-in');
Motion-UI.animatesOut('#elements', 'fade-out', function() {
  console.log('Transitions-Done!');
});

These Transition are high on customization. Each and every of these effects include a Sass-mixin that let us control the every aspects of it, from the speed to direction to easing the Transitions. 

An example for you in which i used the hinge-effect:

@include muihinge(
  $state: out,
  $from: right,
  $axis: top,
  $perspective: 2500px,
  $turn-origin: from-front
);

Finally, Lets add .is-animating class to the parent element to trigger the queue which is an easy task to do in jQuery. 

$('.parent').addClass('is-animating');