Motion UI

What is Motion UI?

Motion UI is a CSS library developed by Zurb to provide pre-designed transitions and animations. Motion UI eliminates the need for complex JavaScript, and can be used by anyone. Included in Motion UI are simple transitions to complex animations. From sliding and fading objects to intricate animations like spinning, and effects that can be played in a series. 

CSS and JavaScript are both used to create these Motion UI transitions and animations. Motion UI is simple to use. All you need to do is have CSS and JavaScript files added to your project and use the provided classes and attributes given by numerous libraries. 

Once you install Motion UI the package comes with CSS files that already include premade transitions and animations. If you want to build your own transitions and animations there are Sass source files that will allow you to do so.

Examples

Here is an example of Motion UI in use. Designed by Aaron Iker when users click the “add to cart” button the animation will play. This is a subtle example of Motion UI

This animation designed by Mochiburon is a great example of how to transform a 404 error page into something better. Nothing is worse then finding yourself stuck on a 404 error page, but something as light and visually appealing as this would definitely help.

Benefits

Motion UI has many benefits including: easy to use, cross-browser compatibility, improved user experience, engagement. Motion UI is designed to be easy to use. It comes with pre-designed transitions and animations that are meant to be easy to add to a website. If you wanted to create your own transitions and animations you could do so with the Sass Source files that come with Motion UI.

All modern browsers are compatible with Motion UI. Which means that transitions and animations will have no problem being supported across platforms. 

Spinning animations, and cool transitions make users more engaged. By creating eye catching effects users are more likely to stay engaged and keep their attention on a website.

Cons

For people who have trouble with motion the many transitions and animations can cause dizziness and nausea. But luckily most operating systems have a “reduce motion” preference that will remove or reduce the motion. Another problem with too much motion is that it can lead to overstimulation. Which can cause people to be distracted from the main message of the webpage. Some animations can slow down web page loading times which can be annoying and make users not want to stay on the site.