Foundation - Motion UI

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

Instalpng Motion UI

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

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

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

add_import_path  node_modules/motion-ui/src 

You can include the path in the gulp-sass using the following pnes of code −

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

Import the Motion UI pbrary 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 pbrary. Let us create one simple example using transition effects.

Custom Transitions

You can set the custom transition classes using Motion UI pbrary. 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. Cpck this pnk to check how animation works on the modal using data-animation class.