3D Animation integration into webpages using Motion UI
Users are most definitely tired of two dimensional webpages and applications with boring user experiences. These developers need to bring this webpages and apps to life, increase movement, and overall create a ‘living’ site which reacts and changes according to each individual user.
As a developer, you’re most likely a part of, if not running, the discovery phase of your project. This might include stakeholder interviews, personas, brand interviews, usability tests, journey mapping, contextual inquiries, etc. During this phase, you’ll learn a lot about your users, especially the fact they most likely will need animation or motion to have a better user experience on your webpage.
Motion UI is a Sass library which is commonly used for quickly creating CSS animations and transitions. With Motion UI the webpage or app becomes 3-dimensional (3D) and therefore enables their interface to look interesting and user friendly with predefined motions. The way prototypical animated elements integrate seamlessly into websites makes Motion UI one of the most preferred libraries by developers.
The newest version of Motion UI works through flexible CSS patterns with all kinds of JavaScript libraries and enables seamless integration of animations into websites.
Motion UI is extensively tested, widely supported, and fast, though it has fewer animations. It’s extremely customizable, and perhaps a bit more developer oriented. If you’re already using SASS or Foundation for Apps, go with this one.
Motion UI has helped to end the boring experiences from two-dimensional webpages. It works through flexible CSS patterns with all kinds of JavaScript libraries and enables seamless integration of animations into websites.
Technical Approach
Prototyping
To start prototyping, we can edit the index.html file of the starter kit, or create our own HTML file. The Motion UI, despite its ability to be independent of the Foundation framework, its layout can also be designed using the Foundation grid.
Building the HTML
The great thing about predefined CSS classes is that they can’t only be used as classes but also as other HTML attributes. For example we can add them to the value attribute of the option] tag, or we can use them in our own custom data -* attribute as well.
Using jQuery to enable Animations and Transitions
Motion UI includes a small JavaScript library as well that can play transitions and animations when a certain event happens. The library itself can be found in the starter kit in the motion-ui-starter > js > vendor > motion-ui.js path. It creates a Motion UI object that has two methods: animateIn() and animateOut().
Using Sass for Customization
Motion UI’s pre-made CSS classes use default values that can be easily customized with the help of Sass. There is a Sass mixin behind each transition and animation that makes it possible to change the settings of the effect. This way we can easily create a fully custom animation or transition. Customization won’t work with the starter kit though, you need to install the Sass version if you want to configure the effects according to your own needs.
Configuring Modifier Classes
Modifier classes that control the behaviour (speed, timing, and delay) of animations and transitions are also configurable with Sass by modifying the values of the respective variables in the _settings.scss file. After you make your changes, Motion UI will use the new values as the default in every animation and transition, so you won’t have to configure the related mixins one by one.
Advantages of using Zurb’s Motion UI
Just like every Zurb’s products it runs fast.
It is fairly simple to implement.
It is as cross-platform as possible. Zurb tests their work extensively.
Tight integration with Foundation for Apps
