Perhaps the sassiest library that helps in bringing the zing to your website using snappy animations and transition effects. Don’t worry if you’re new to this coz we’ve got it for you!
In recent times websites have a huge difference in designs that go way beyond the conventional definitions of website designs and layout. The simpler and sleek, the better! Having originated from Foundation of Apps as a bundle, this library has an enormous collection of animation and transition effects that is flexible enough to work with almost any Javascript animation library. The best part, you’d ask, will be undoubtedly the availability of the platform to create newer designs!
Getting Started 101
Let’s go about this by one step at a time:
Installation:
- Install motion ui with npm and bower with the following codes:
npm install motion-ui –save-dev
bower install motion-ui –save-dev - The package contains a set of default source files for transitions and animations to help you get the hang of it. Here’s the link of all the source codes https://github.com/zurb/motion-ui/blob/master/docs/classes.md
- For adding a path for Motion UI Library in the compass insert the following code:
add_import_path ‘node_modules/motion-ui/src’ - In case you’ve gulp-sass write:
gulp.src('./src/scss/app.scss')
.pipe(sass( {
includePaths: ['node_modules/motion-ui/src']
}));
- For importing the Motion UI in the sass library write:
@import 'motion-ui'
Transitions:
The transitions are the USP of Motion UI which can be implemented on transition to overlays, off-canvas and modules. Examples are enclosed below:
Built-in Transitions
These are the type of transitions that comes all set with the package to help you as a reference. Here’s the example:
<!doctype html>
<head>
<meta charset = “utf-8” />
<meta http-equiv = “x-ua-compatible” content = “ie = edge” />
<meta name = “viewport” content = “width = device-width, initial-scale = 1.0” />
<title>Motion UI Transition</title>
<link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css”>
<link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.css”>
<script src = “https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js”></script>
<script src = “https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js”></script>
</head>
<body>
<h2>Motion UI Transition Example</h2>
<p><a data-toggle = “toggle_panel”>Click here to toggle the panel</a></p>
<div class = “callout” id = “toggle_panel” data-toggler data-animate = “hinge-in-from-bottom spin-out”>
<h2>Foundation</h2>
<p>Foundation is semantic, readable, flexible, and completely customizable.</p>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Custom Transitions:
Creating your own transitions is the real fun and is something Motion UI is known for. Here’s an example of how to set custom classes for mui-hinge() transition, which rotates the element.
@include mui-hinge(
$state: in,
$from: top,
$turn-origin: from-back,
$duration: 0.5s,
$timing: easeInOut
);
Animations:
Animation effects are the best to play with using CSS and can be implemented with mui – animation( ) mixin. Either you can pass a mixin one or more effects that are created into one keyframes, or you develop it locally.
// Use the default slide effect
.slide {
@include mui-animation(slide);
}
// Create a custom slide effect
.slide {
@include mui-animation(slide($direction: up, $amount: 120%));
}
// Combine multiple effects
.slideAndSpinAndFade {
@include mui-animation(fade, spin, slide($direction: up, $amount: 120%));
}
For Series Animation, the following code needs to be implemented:
*All animations need to be from a common parent and then needs to have a special class to the parent to trigger animations:
<div class=”parent”>
<div class=”thing-one”></div>
<div class=”thing-two”></div>
<div class=”thing-three”></div>
</div>
Add the mui-series class,
@include mui-series {
// ...
}
Applying the mui-queue mixin,
@include mui-series {
.thing-one {
@include mui-queue(1s, 0s, fade);
}
// A 2s pause will happen after this animation ends
.thing-two {
@include mui-queue(1s, 2s, slide($direction: right));
}
// It works with multiple effects, too!
.thing-three {
@include mui-queue(2s, 0s, spin($direction: ccw), slide($direction: up));
}
}
For triggering the queue, add the class .is-animating to a parent query. Doing it in jQuery, the code will be as follows:
$('.parent').addClass('is-animating');
As we mentioned earlier, the motion UI works fine as long as there is seamless jQuery included:
var elem = $('#elem-to-animate');
Foundation.Motion.animateIn(elem, animationClass [, callback]);
Foundation.Motion.animateOut(elem, animationClass [, callback]);
*Make sure to include the js/foundation.util.motion.js path and it shall work once the animation is complete.
Phhew. That was some work! Once you get started with these codes, you’re sure gonna roll with it. Share with us how was your Motion UI experience in the comments down below!
