Foundation - Motion UI

Description

Foundation provides Motion UI library for creating UI transitions and animations and used by Foundation components such as Toggler, Reveal and Orbit.

Installing Motion UI

You can install Motion UI library to your project by using npm or bower as shown in the below line of code:

$ npm install motion-ui --save-dev 

bower install motion-ui --save-dev

You can add path for Motion UI library in the in Compass by using config.rb as shown in the below line of code:

add_import_path 'node_modules/motion-ui/src'

You can include the path in the gulp-sass using below lines of code:

gulp.src('./src/scss/app.scss')
  .pipe(sass({
    includePaths: ['node_modules/motion-ui/src']
  }));

Import the Motion UI library in the SASS file using below line:

@import 'motion-ui'

Built-in Transitions

Foundation provides transition effects by using transition classes which are created by Motion UI library. Let's create one simple example using transition effects.

Custom Transitions

You can set the custom transition classes using Motion UI library. For instance, we will set custom classes for mui-hinge() transition which rotates the element:

@include mui-hinge(
  $state: in,
  $from: right,
  $turn-origin: from-back,
  $duration: 0.5s,
  $timing: easeInOut
);

Animation

You can use Motion UI transition effects for creating CSS animations. Click this link to check how animation works on the modal using data-animation class.