TAKE CONTROL OF YOUR ANIMATION WITH MOTION UI

For designers, having a tool that gives you full control over how your effects work is invaluable; that’s what it means to work with Motion UI.

Originally found within the Foundation for Apps framework, Motion UI is an open-source Sass library for creating custom CSS transitions and animations.

As an extension of CSS, Sass helps keep large style sheets organized and gets smaller stylesheets in operation faster, giving more power to the designer and adding greater structure to the basic language.

Recently, Motion UI has undergone several updates to become a more robust tool with new transition options, an enhanced system for animation queueing, and additional CSS patterns that allow collaboration with numerous JavaScript libraries for greater flexibility.

Although it was designed to be mainly used with the Foundation family of frameworks, Motion UI can integrate with any framework’s animation library, including React, Angular, and more.

Using the Motion UI library, designers can set their own custom transition classes and then see the effects come to life as soon as the classes are added.

Motion UI allows designers to design more expressive interfaces by giving users the capability to set up their unique animation queue to create CSS animations from Motion UI transition effects.

Motion UI’s pre-made CSS classes primarily use default values, which can be modified with the help of a Sass mixin that allows designers to customize the respective variables of Motion UI animations and transitions to achieve full control over every aspect of an animation or transition.