What is Motion UI?

A good design is an essential aspect of a website or app. These are important as it helps to build a good user interface. Transitions and animations are great tools and can help bring a much-needed elegance to the web. In the early days, the static design was used, but now the motion design is very popular. 

One way to introduce these transitions and animations to the web is by ZURB Studios. ZURB has been in the business of making cool web design software for quite a while now, and one of their most common ones is called Motion UI. Motion UI is ZURB’s own Sass library that provides nothing but dynamic transitions and animations for your platform. Both of these effects are specifically incorporated into the Motion UI, and this helps make the animation process incredibly quick and time-efficient.  

Motion UI is a Sass library for quickly creating flexible UI transitions and animations. It is a stand-alone library that controls the transformation effects included in a variety of Foundation components, including Toggler, Reveal and Orbit.

Getting Started

You can use npm or bower to install the Motion UI library in your project. Where the package includes a CSS file with a collection of pre-made transitions and animations, along with the Sass source files that allow you to build your own. 

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

Motion UI provides a set of pre-made effects as a CSS package. This includes transition effects to slide, scale, fade, hinge, and spin, as well as several built-in animations. 

You can add a path to the Motion UI library in the Compass by using config.rb as given below:

add_import_path 'node_modules/motion-ui/src'

You can use the following lines of code to include the path in the gulp-sass:

gulp.src('./src/scss/app.scss')
  .pipe(sass({
    includePaths: ['node_modules/motion-ui/src']
  }));

Finally, you can import the Motion UI library in the SASS file using the code given below:

@import 'motion-ui'
@include motion-ui-transitions;
@include motion-ui-animations;

Transitions 

Just like transitions that you would use in a slide show or video, those here are meant to help the transition process of components that come in and out of your site. The Motion UI package includes a small JavaScript library designed to trigger these transitions.  

Built-in Transitions

 Foundation provides transition effects through the use of transition classes that are created by the Motion UI library which includes more than two dozen built-in transition classes.

They can be enabled by adding the following code to your Sass file after you have imported the library:

@include motion-ui-transitions;

Custom Transitions

You can set the custom transition classes using Motion UI’s mixin library. 

For example, mui-fade() use to creates a fade transition by adjusting the opacity of the element.

@include mui-fade(
  $state: in,
  $from: in,
  $to: out,
  $duration: 0.5s,
  $timing: easeInOut
);

Animations

You can also use the Motion UI transition effects to create CSS animations. The library also allows creating series effects, with animations on multiple elements occurring in a queue. All of these animations are created with the mixin’s mui-animation(), where it is used to create CSS keyframe animations.

Series Animations

Along with standard, one-time animations, Motion UI also allows you the ability to animate multiple items in a specified series. You can begin your series with the mui-series() and inside this mixin, you can attach animations to classes with the mui-queue() mixin.

There are many activities where Motion UI can be implemented:

It is essential that you properly apply the Motion UI on your website and on your apps. In a variety of cases this can be achieved as described below: 

1. Welcoming users: In some cases, the applications and websites will welcome the users with a pleasant message of greeting. A good message of welcome has a positive impact on the customers. Who can skip the Nokia mobiles logo of two hands meeting? A pleasant welcome screen on the applications and websites improves the user’s experiences. You only need to apply motion when necessary and have a specific intention for the same reason. If possible, this must only be implemented when the loading of apps and website is delayed for a period.
2. Inform about actions: The users need to be aware of and how they will perform on your website. This guidance will enhance the UX and contribute to the improvement of the website and apps. It must also be borne in mind that the motions implemented must complement and add to the user experience of the app and must also help to retain the attention of users and by using elements such as bounce and velocity.
3. Confirm the activities: In a majority of cases, various activities such as deleting mail, sending mail, uninstalling applications, clicking on some links, deleting data, etc. and other such elements need confirmation. It is used in a variety of irreversible activities. In a lot of cases, the confirmation process will be animated to attract more attention to users and to ensure that they do not make any errors in doing so.
4. Add fun elements: There are a lot of apps and websites that introduce fun elements and have become really popular. This makes it easy to navigate the apps and the website, which makes it easier for users to visit again and again. Therefore, the fun elements must be added properly to the website. Various fun elements such as zooming in, zooming out, sliding, etc can be introduced to make the display and content simpler and more enjoyable.
5. Feedback loop: In a majority of cases, users interact with applications and websites. In such situations, the feedback helps to provide a better user experience. Suppose you try to build a response when the user wants to log in to the app or website and enter the wrong password. In this case, the feedback loop turns out to be very useful and helps the users to log in to notify in such cases. It can also be used to view some animations on the websites. These are available in a wide range of applications and can be viewed on the lock screen of the websites.
6. Refresh content: The content of social media websites and applications is updated very frequently. In such cases, the content can quickly be refreshed so that the users can get the best user experience and also get the content when they arrive. In this case, You can either slide the screen down and leave it to update the content on Twitter, Instagram, Facebook, and other such apps. Apart from these, you can also click on the available button to view the new updates.

Motion UI is quite necessary and must be adopted and implemented on your website. This guarantees that you are able to provide the best user experience and helps to make a positive impact on the minds of your consumer. This can be done with the help of transitions along with initial wireframing. What motions to implement need to be decided in advance, since then you will have a clear understanding of how the final result should be.