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.
Head on over to the ZURB Playground to see the library in action.