Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:6Length:43 minutes

Next lesson playing in 5 seconds

Cancel

Free Preview: Learn Motion UI From Top to Bottom

Welcome

00:23
  • Overview
  • Transcript

In this short course you’ll learn everything you need to know about Motion UI, the Sass library for transitions and animations from ZURB. We'll cover creating transitions and animations (and the difference between the two), configuring Motion UI, and integrating WOW.js to reveal elements as users scroll.

1. Introduction

1.1 Welcome

Hello and welcome to an Envato plus short course. I'm not a part of the I'm, and this course you learn everything you need to know about motion UI. Now and this is a SAS library made by ZIRP, and its purpose is to help you create C.S.S. transitions and animations. So let's begin by learning how to install the library.

1.2 Installing Motion UI

And the first thing you need to do, just like with any library, is to install it. There are a few ways to do that, so let's begin. Probably the easiest way is to download this Starter Kit from the Motion UI homepage. But the thing is, this starter kit contains some additional CSS that you might not need. So for example, it contains stuff from Foundation, a bunch of their JS files as well as the entire Foundation CSS. And of course, on top of that, you do have the Motion UI CSS file. So if you just want to play around with Motion UI, then I guess this is a fine start, but if you want a little bit more control, then I recommend not using this method. Now, the other method is, the first one of course to download this directly from Github. Now, if you go to Github, go to Motion UI here on the repository, you'll find a link here, Download ZIP, you're gonna get the master.zip file for the respository. And that will contain, inside the dist folder, you are going to have the JS and CSS files you need. Now, the good thing about this approach is the fact that you also have the sources, the SCSS files, so if you want, you can make changes to those. This is something that you're not getting in the starter kit right here. Now this with Github is the second method. The third method, it's actually the one that I use, is to just get it via Bower. You can use either Bower or NPM. You can install it like this. Now, once you install everything, you need to load those files in your HTML and your CSS. So let's have a look at that next. Here you can see the files that I'm going to use for this tutorial and that you can use if you want to learn alongside. We have a few folders for each of the lessons that we'll follow, plus two extra folders, one for demo, this contains just regular demo CSS for a page that I've built, and Bower components. Now, here we have jQuery, motion-ui, normalize, and wow. jQuery I'm gonna be using it later on. motion-ui, this is the stuff that you're interested in right now. So you see we got this using Bower. It's an exact copy of the of the master file from GitHub. Then we have normalize. Again, this is used for the demo page that I've built. And then wow, now, this is wow.js, it's a library that allows you to trigger animations on scroll. Now, you learn about this in the very final lesson. Now, once you get all these files, the first thing you need to do is create an SCSS file, import the Motion UI library from this path here, so from the source files, and then you can include these two mixins for the default Framework CSS. Now, what this is doing, if we take a look at the CSS, it's gonna give you a lot of transitions, animations, and helper classes that you can start using right away. And these are generated by these two mixins. So once you get the the CSS file generated, in the HTML, you simply load the CSS, and then load the motion-ui.min.js file from the dist folder. And you'll see in the next lesson how exactly we're going to use this JS file. And that's how you install Motion UI. Now, once you do this, you're ready to get to work. So let's see how we can work with transitions. That's coming up next.