The team here at ZURB is working furiously on the next version of our responsive front-end framework, Foundation for Sites 6. As we get deeper into development, we thought we’d give people a brand new tool to add to their webdev arsenal, an open-source Sass library for animation and transition effects called Motion Ui.

You may have first seen Motion UI in another one of our frameworks, Foundation for Apps. This new Motion UI can now be used with Foundation for Sites or any other project and includes several updates including more robust transition options, an animation queueing system, and flexible CSS patterns that can work with any JavaScript animation library.

Prototype to Production

This has been our mantra as we work work on the latest versions of our products. Each piece must prove valuable from the prototyping stage straight through to polished production quality code.

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>

While Motion UI was designed for use with our Foundation family of frameworks, it can be easily adapted to work with any framework’s animation library, such as Angular or React.

Motion is a powerful tool for designers, allowing us to design more expressive interfaces by giving users queues around hierarchy, spatial orientation, and more.

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

Head on over to the ZURB Playground to see the library in action.