Introducing the New Motion UI

wrote this on in , , . 754 reactions

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.

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

Play with Motion UI

Get inside info on the release of Foundation for Sites 6:
Screen shot 2016 08 15 at 4.40.25 pm
Transforming the Lives of Adults With Disabilities Through 24 Hours of Design
Zurbwired2016 zurbwired
#ZURBWired 2016: We Are Live!
Graphic 01
Design Just Ate My Software: How Designers Are Leading the Product Revolution