Home

Awesome

<p align="center"> <a href="https://get.foundation/sites/docs/motion-ui.html"> <img src="https://user-images.githubusercontent.com/9939075/40385796-108879b6-5e08-11e8-8a12-3bbe7d0bc631.png" alt="Motion UI" width="448px" style="max-width:100%;"/> </a> </p>     <p align="center"> <a href="https://github.com/foundation/motion-ui/blob/docs/installation.md"><b>Install</b></a> | <a href="https://get.foundation/sites/docs/motion-ui.html">Demo</a> | <a href="https://github.com/foundation/motion-ui/blob/docs">Documentation</a> | <a href="https://github.com/foundation/motion-ui/releases">Releases</a> </p>

CDNJS

💎 The powerful Sass library for creating CSS transitions and animations. The code is a standalone library, used by Foundation for Sites.

Installation

Install Motion UI with npm or Bower.

npm install motion-ui --save
bower install motion-ui --save

Then to build with Sass (Autoprefixer is required):

// Add the load path "[modules_folder]/motion-ui/src" to your Sass configuration
@import 'motion-ui';

@include motion-ui-transitions;
@include motion-ui-animations;

Autoprefixer is required for the Sass installation as Motion UI uses unprefixed transition and animation properties. We recommend you to install PostCSS and Autoprefixer.

Or to use the equivalent pre-compiled CSS, import the Motion UI standalone CSS file dist/motion-ui.css or dist/motion-ui.min.css.

To easily transition elements in and out using Motion UI classes, import the Motion UI JavaScript library dist/motion-ui.js or dist/motion-ui.min.js.

See the full installation instructions

Demos

View live demo.

Documentation

View the documentation here.

Develop Locally

git clone https://github.com/foundation/motion-ui
cd motion-ui
npm install