Motion UI

Design is not just what it looks like and feels like. Design is how it works. -Steve Jobs

These words justify the Motion Design in a perfect sense.

A good design reflects a good user interface providing the website or mobile user with a better experience. This, in turn, helps to reach the number of users as they can navigate easily on the app or website. A good app or website comprises of different elements like colors, fonts, space, and icons. The static design was used in earlier days but nowadays the trend is of motion design that gives life to the digital products. The aim of the Motion Design is to amaze the users which in turn will increase the usability of digital solutions.

The motion refers to the change in position of an object with respect to the time and UI which stands for user-interface refers to the program which provides human interaction with the system. As suggested by the name, Motion UI allows the user to interact with the system having elements in motion. Technically, Motion UI can be considered as an animation in web designing by providing movement (soul) to the elements.

Motion UI is an open source and stand-alone Sass library for quickly creating flexible CSS transitions and animations to make a website look more stunning. It actually wraps up with Foundation framework that is one of the most advanced frameworks in the world of web designing enriched with the responsive feature that makes it more popular. It can work with any JavaScript animation library and can be adapted to work with any of them such as Angular or React.

Motion UI includes a bundle of pre-made effects as CSS classes and can incorporate a number of elements into it. These are shapes, text, lines, illustrations, photography, 3D objects, video, and many more. All of these elements can be animated in motion UI design for 3 major uses:

  1. System status to load indicators and notifications.
  2. Navigations and transitions can be used for hierarchy and connection between elements, function change, and other such effects.
  3. Visual feedback for acknowledgments and results of the actions.

These, if taken care of and implemented properly, can quite easily provide an amazing experience to the users. In the transactions, the timing and visual aesthetic beauty must be properly maintained.

The transition effects of Motion UI are applicable for different components of Foundation framework, as well as they are also used in Orbit, Reveal and Toggler. The animations and the transitions allow the designers to visualize the changes and then differentiate the content. It helps to make the animation process extremely simple and time-effective.

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

1. Transition Class

The core function of Motion UI is to transition components in and out. These transitions are highly customizable. You can apply these transitions to modals, off-canvas menus, overlays and more.

This can simply be achieved by passing an element and a motion class.

2. Animation Class 

The same effects used for transitions can also be used to build CSS animations.

It enables the use of different wiggling, shaking and the spinning effects.

All animations are created with the mixin mui-animation(). The effects are passed to the mixin, which is combined into one set of keyframes.

3. Modifier Class 

It works together with both the transition animation and transition classes, and allows to adjust the timing, the speed, and delay of movement.

Each effect includes a Sass mixin which allows controlling every aspect of it, then maybe it’s a direction(from what direction an element slides) or duration(how long it spins) or speed(how intensely it shakes).

These pre-made classes are can also be used as the HTML attribute.

Motion UI also gives the ability to animate multiple items in a set order that we create. It’s an incredible tool if you want to animate multiple items at once in a specific order.

To achieve multiple animations at a time, the first requirement is to have a common parent with a special class (.is-animating) of all the elements in order to trigger the animations. Each individual element will be attached to the mui-queue through which one can pass any kind of effect, a duration of the animation or a pause between that animation and the next one known as the gap.

The core of the library is a set of powerful transition and animation. Motion UI includes more than two dozen built-in transition and animation classes that make prototyping easy. When you move to a production environment, the library gives you total control over how your effects work.

Due to consistent styling, naming, and architecture, it provides the scope of upgrading the CLI to build projects in any framework and building standalone libraries to be used by multiple frameworks.


I am a technology freak with passion for UI technology.

Leave a Reply