Foundation - Motion UI

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

Installing Motion UI

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

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

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

add_import_path 'node_modules/motion-ui/src'

You can include the path in the gulp-sass using the following 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 the following code −

@import 'motion-ui'

Built-in Transitions

Foundation provides transition effects by using transition classes which are created by Motion UI library. Let us 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.