Introduction To And Main Features Of Motion UI

September 6, 2016 | Usman
ui motion

Motion UI is a sass library that is widely used by the designers to manipulate Custom CSS. Using motion design designers can create amazing and attractive Custom CSS animations and transitions. In this blog post, we would cover the main features and the role of Motion UI.

1. Works with Foundation Framework
UI Motion design works with Foundation Framework which is undoubtedly known as one of the best frameworks used in the world of web design. Foundation Framework comes up with whole shebang: the responsive features that make it more popular among the community of the web designing people. Motion and design of this UI thus attract designers, because they get access to an amazing tool which makes manipulating Custom CSS as fun as a day at the beach.
More importantly, Motion UI is now considered an open-source for the new Foundation framework. All he transitions that a designer can create by special Motion UI Sass classes are also compatible with different components of Foundation framework.

2. More Enriched Features
With the passage of time Motion UI has only evolved into a better and better version of itself. The new version offers much more enriched and diverse features of CSS transitions. With new queue system and a new pattern of CSS, it is obviously what web designers wanted the most.

3. Starter Kit
Although the Motion UI comes with a sass library and programmers can use the help from this library, ZURB provides the programmers a starter kit which is made of compiled CSS. With this starter kit, the novice programmers can feel free of the worries of handling complex sass library and they can just start prototyping by using predefined CSS transition and animation classes. Not only the starter kit contains Motion UI, but it contains the foundation framework too, and thus programmers can use Foundation grid as well as Foundation for Sites. This starter kit can be downloaded from the Motion UI homepage.

4. Compatibility with JavaScript
The new ux in motion makes it perfectly compatible with JavaScript animation library. This means that designers would easily enjoy the integration of JavaScript library and the Motion UI.

5. Originally Integrated with Foundation for Apps
The Motion UIhas recently been open sourced and this version of UI Motion design is bundled with the Foundation for Apps.

6. Built-in Transition and Animation Classes
Motion UI is selling like hot cakes because it comes with more than 24 built-in transition and animation classes; as a result proto-typing is much easier than ever. The best thing is the total control that programmers enjoy in a product environment; the library lets them enjoy total control on their effects. Programmers can use five transition effects to create stunning CSS animations.
Plus the library allows them to come up with exciting series effects.UI Motion design supports series animations and thus programmers can create multiple elements to be shown or animated in a sequence. For every such element they can determine the length and delay etc.The animations on different effects happening in the queue adds value toMotion UI programming. This makes possible for programmers to use multiple elements and then animate them in a certain order. The series animations were never so easy.

7. Modifier Classes
While transition and animation classes help the programmers with jobs like adding transitions to an HTML element or use different types of shaking, wiggling and spinning effects, the modifier classes are also offered with Motion design. These classes are there to support both: transitions and animations, and let the programmers set the timing, speed and delay of animations or movements.However, these modifier classes can also be configured with help of Sass. Once the changes are made, Motion UI will automatically use the new values as default values in each animation and transition.

8. Building HTML
One of the best things about predefined CSS classes is that apart from using them as classes, they can also be used as HTML attributes. That is, programmers can use them in their own custom attribute and do many other things like this.

9. Custom Transitions
Although UI Motion design comes with more than two dozen built-in transitions, if programmers feel like going for custom transitions, they are also possible. With Motion UI there comes a mixin library; using this library, any programmer can make custom transition classes.

10. Pre-made CSS Classes
Not only the Motion UI lets programmers use the amazing set of transitions and animations in Sass mixins, and allows them to enjoy total control on how they use an effect, it also includes a wide range of pre-made CSS classes to help the programmers do their work much easily. Now designers can completely dictate the way how an effect works; they can control the direction of slide, the way an effect spins and how powerfully it shakes.
The CSS classes that come with Motion UI can be easily customized with help of the Sass. The Sass mixin that works behind the transitions and animations can help the programmers change the settings of any effect. Thus, a pre-defined CSS class can be converted into a fully custom transition or animation. These mixins make a couple of CSS keyframes which can be dropped on to the target element. As soon as the class is added the effect plays.

11. Foundation for Sites
Motion UI works with Foundation for apps as well as foundation for sites. The new version of UI Motion designworks with a JavaScript library and thus programmers can easily use both with built-in plugins.Motion UI supplies the transition effects such as Toggler, Reveal and Orbit which are used in Foundation. These transitions are supported by specific transition classes created by Motion UI sass.
The Toggler which is a JavaScript plugin, rapidly prototype the stateful plugins and helps with errands such as animating an element in and out on click. Two Foundation plugins: Reveal and Orbit also enjoy Motion UI support.

12. Included in both Starter Projects
The Motion UI is included and ready to use in both projects: basic template and ZURB template. If someone wants to use UI Motion design in an existing project, they can do so by following simple steps.

13. Motion UI – JavaScript – jQuery
With Motion UI comes a small JavaScript utility that works like a magic anywhere if jQuery is already loaded. The transitions made by using UI motion design, are highly customizable. This is because of the Sass mixins that give programmers total control of all the aspects.

14. CSS Animations
The beauty of Motion UI is its simplicity and easy-to-handle features. The effects that are used for transitions, can also be used to create the CSS animations as per the requirements. The mui-animation() mixin helps the programmers in creating animations.
The Motion UI is a program that was basically bundled with Foundation for Apps; Foundation for Apps is used to create responsive and powerful web apps. However, ZURB decided to add some spice to this tool and pulled out first model of UI Motion design, empowered it with amazing new effects and the animation queueing system. What users get is a standalone program empowered with sass library. A number of JavaScript plugins working seamlessly with Motion UI and very effective set-up of animations and transitions, make Motion UI the best and most robust program for programmers and designers. This success predicts the possibility of many upcoming versions and variations of Motion UI.

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow Us


Dont Miss Out!

Be the first one to get the latest Industry updates,tips and tricks.


"Don't worry, we won't spam you"