Setting a workflow for using Motion UI
Problem
Motion UI is 'a Sass library for creating flexible CSS transitions and animations', just as they put it on their site. But it is quite hard to get it started if you are new to it as their documentation does not seem very good for beginners. I have looked around and I can't find any good article that can guide you step by step in details.
You can download the Starter Kit from Motion UI site and fiddle it around, but that lacks of your own control because it comes with a number of built-in defaults and effects and you have to stick with them. But if you want to have more control and take the full advantage of Motion UI, you must know how to customise and compile the Sass code yourself.
After a few hours of researching and experimenting, below are two workflow options you can choose to use Motion UI for your web projects.
Basic
This is the easiest and simplest workflow to use Motion UI. The directory structure can be as simple as:
-------------
css/
img/
js/
index.html
package.json
-------------
In your package.json:
"dependencies": {
"foundation-sites": "^6.5.0-rc.3",
"what-input": "^4.1.0",
"motion-ui": "^2.0.3",
"jquery": "^3.3.1"
}
foundation-sites is optional. After that, just install them:
$ npm install
The most important thing in this approach is that you must have Sass installed globally in your machine:
$ sudo npm install -g sass
Then in the css folder, create a Sass file, style.scss, and import Motion UI:
@import '../node_modules/motion-ui/src/motion-ui';
@include motion-ui-transitions;
@include motion-ui-animations;
Followed by the customisation that you wish to make, for example:
.welcome {
@include mui-animation(fade);
animation-duration: 1s;
}
Then you can process the Sass file by:
$ sass style.scss style.css
Sass will compile the code and create a style.css in the css folder. Better, use the watch command below to watch for changes and and compile it automatically:
$ sass --watch css:css
Lastly, you just have to include the compiled css file in your HTML, for example below is what I have in mine:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Motion UI Basic Workflow</title>
<link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/motion-ui/dist/motion-ui.js"></script>
<script src="node_modules/foundation-sites/dist/js/foundation.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="row">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell small-12">
<h1 class="welcome">Welcome to Foundation</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell small-12">
<button class="button">Click Me</button>
</div>
<div class="cell small-12">
<img id="yeti" src="img/yeti.svg" data-animation="scale-in-up">
</div>
</div>
</div>
</div>
</body>
</htm>
You might want to trigger the Motion UI animation or transition via JavaScript. If so, create a js file, script.js:
$(document).ready(function() {
$(".button").click(function() {
var $animation = $("#yeti").data("animation")
MotionUI.animateIn($("#yeti"), $animation)
})
})
Include it in your HTML. That's it.
Gulp
This is a bit more advanced if you want to write ES6 code in JavaScript and you are familiar with Gulp. I have written an article sometime ago, Setting up a workflow with Gulp for fontend development, and it is basically the same as you just have to add motion-ui to the dependencies and add gulp-sass to devDependencies. You don't need to install Sass globally for this workflow.
So this is the entire dependencies:
"dependencies": {
"@babel/polyfill": "^7.0.0",
"es6-docready": "^1.0.0",
"foundation-icon-fonts": "^0.1.1",
"foundation-sites": "^6.5.0-rc.3",
"motion-ui": "^2.0.3",
"what-input": "^5.1.2",
"jquery": "^3.3.1",
"jquery-ui-bundle": "^1.12.1"
},
and this is the entire devDependencies:
"devDependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/plugin-transform-arrow-functions": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"babelify": "^10.0.0",
"browserify": "^16.2.3",
"browserify-shim": "^3.8.14",
"gulp": "^3.9.1",
"gulp-batch": "^1.0.5",
"gulp-clean-css": "^3.10.0",
"gulp-clone": "^2.0.1",
"gulp-concat": "^2.6.1",
"gulp-concat-css": "^3.1.0",
"gulp-cssimport": "^6.0.1",
"gulp-foreach": "^0.1.0",
"gulp-htmlmin": "^5.0.1",
"gulp-less": "^4.0.1",
"gulp-livereload": "^4.0.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"gulp-watch": "^5.0.1",
"streamqueue": "^1.1.2",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
To install them:
$ npm install
To watch Sass, LESS and ES6 development:
$ gulp watch
That's it. Really.
Conclusion
You can download the entire source code of these two workflows above here, install it and run it from your local machine and see how it works.
Hope this quick guide is helpful if you ever are having some troubles to implement Motion UI to your project. Let me know what you think. Any suggestions and insights, please leave a comment below.
