Sass library for creating transitions and animations.

Downloads in past


1,153172.0.5a year ago9 years agoMinified + gzip package size for motion-ui in KB


<img src="" alt="Motion UI" width="448px" style="max-width:100%;"/>


Install | Demo | Documentation | Releases

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


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


View live demo.


View the documentation here.

Develop Locally

git clone
cd motion-ui
npm install

  • Run npm start to compile test Sass/JS files, and to build the documentation.
To make changes to the documentation, edit the files under docs/src.
  • Run npm test to run the unit tests.
  • Run npm start dist to compile distribution files.