https://github.com/foundation/motion-ui

💎 The powerful Sass library for creating CSS transitions and animations
https://github.com/foundation/motion-ui

Last synced: 2 days ago
JSON representation

💎 The powerful Sass library for creating CSS transitions and animations

• Host: GitHub
• URL: https://github.com/foundation/motion-ui
• Owner: foundation
• License: mit
• Created: 2015-03-19T23:07:39.000Z (almost 10 years ago)
• Default Branch: develop
• Last Pushed: 2024-09-26T21:51:12.000Z (4 months ago)
• Last Synced: 2025-01-02T19:00:11.626Z (9 days ago)
• Language: SCSS
• Homepage: https://zurb.com/playground/motion-ui
• Size: 1.3 MB
• Stars: 1,163
• Watchers: 71
• Forks: 174
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• Awesome-CSS-Resources - motion-ui:
• awesome-web-animation - Motion-ui - The powerful Sass library for creating CSS transitions and animations. (CSS)

README

        


  

    

  



 

 




  Install

  | Demo

  | Documentation

  | Releases



---

[![CDNJS](https://img.shields.io/cdnjs/v/motion-ui.svg)](https://cdnjs.com/libraries/motion-ui/)

💎 The powerful Sass library for creating CSS transitions and animations. The code is a standalone library, used by [Foundation for Sites](https://get.foundation/sites/).

## Installation

Install Motion UI with npm or Bower.

```sh

npm install motion-ui --save

bower install motion-ui --save

```

Then to build with **Sass** ([Autoprefixer](https://github.com/postcss/autoprefixer) is required):

```scss

// 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](https://github.com/postcss/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](https://github.com/foundation/motion-ui/tree/master/docs/installation.md)

## Demos

[View live demo.](https://get.foundation/sites/docs/motion-ui.html)

## Documentation

[View the documentation here.](https://github.com/foundation/motion-ui/tree/master/docs)

## Develop Locally

```sh

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

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.