Motion UI- Makes Your Website Design to Breath

Motion UI includes pre-made effects as CSS classes.

This includes transition effects to slide, hinge, fade, spin, and scale as well as a few built-in animations.

Foundation provides Motion UI library for creating UI transitions and animations and is used by Foundation components such as Toggler, Reveal and Orbit.

With the upgradation in the version of Motion UI, it works through flexible CSS patterns with all kinds of JavaScript libraries and enables seamless integration of animations into websites. So, webpages are no longer two dimensional and creating boring experiences.

With Motion UI developers can bring a webpage to life, by indulging to increase movement, and overall create a ‘living’ site. This website reacts and changes according to each individual user making happy.

Further, this blog will help you to create effects in your images and designing part.

How to Create Animations and Transitions with Motion UI

Quick Prototyping

To start with prototyping, you can edit the index.html file of the starter kit, or also 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:

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

b) Animation Classes – enable you to use different shaking, wiggling and spinning effects

c) Modifier Classes – work together with both transition and animation classes, and they let you adjust speed, timing, and delay of a movement.

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

…

}

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

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 complete code and the result. We have used Foundation frameworks’s built-in button classes for the Click me button, and added basic CSS as well.

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

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

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

Configuring Modifier Classes

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

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

Our graphics designers will be able to make this easily and more eloquently. Do you want to use it for making your website looking attractive? Consult with our website designing experts now!

[Content Source- Webwing Technologies PVT.LTD]