How Motion UI is the new cool for website transitions

How Motion UI is the new cool for website transitions

 

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!

Viewer Engagement – The Game Of Aesthetics And Precision

Engagement, in a nutshell, is something that drives a venture or an organization ahead. In this day and age, feedback is respected the most. People define a brand now more […]


Read More
Beware! Why is Slow Loading Speed a Website Killer?

A topic that has recently been something everyone wants to talk to. Why is there a sudden interest in the website loading speed? Well, the answer to it is that […]


Read More
Have you made your website responsive? If not then now is the...

With a plethora of devices in the market and more coming up in the future, do you think having a website for each of them would be a sound proposal? […]


Read More