Motion UI Design

The current state of motion design can be compared to the Drop Shadow Era of visual design.
Animation capabilities have improved dramatically across the web driven by CSS transitions, hardware accelerated transforms along with coming standards such as JS Web Animations
In addition to this, increasingly capable, multi-core, multi-gigabyte, high DPI mobile devices can now comfortably output 60fps animated UIs.

Animate like it’s 1999!
Given the early state of UI motion design, it’s only natural that designers are tempted to add animation as visual flair, not unlike, drop shadows or bevels.


In preparation for the upcoming release of Foundation for Sites 6, today we're open-sourcing Motion UI, a Sass library for creating custom CSS transitions and animations. Originally bundled with Foundation for Apps, this updated version includes more robust transition options, an animation queueing system, and flexible CSS patterns that can work with any JavaScript animation library.

Prototype to Production
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.

The core of the library is a set of powerful transition and animation Sass mixins, which give you complete control over the details of an effect, from what direction an element slides, to how far it spins, to how intensely it shakes. Motion UI also includes a large number of pre-made CSS classes to help you get going quickly.

<div id="panel" data-animate="slideInRight" class="slow bounceIn"></div>

The library was designed for use with the Foundation frameworks, but can be adapted to work with any framework's animation library, such as Angular or React.

Motion is the New Flat
While previewing Foundation for Apps last year, we wrote about how 'motion is the new flat'. Animation allows us to design more expressive interfaces, by giving users queues around hierarchy, spatial orientation, and more. Foundation for Apps shipped with Motion UI, a Sass library that makes it easy to create CSS transitions and animations for your designs.

As we continue to develop the Foundation family, we're looking for ways to streamline the experience of using the three frameworks. This includes more consistent styling, naming, and architecture; revamping our CLI to build projects in any of the frameworks; and building standalone libraries that can be used by multiple frameworks.

You can use the new Motion UI in an existing Foundation for Sites 5 and Foundation for Apps project now. As for Foundation for Sites, version 6 it will include Motion UI and a JavaScript library that makes it easy to hook into, both with our built-in plugins like Reveal, and with your custom components


Source: http://zurb.com/