Creating CSS Animations Using Move.js

CSS3 transitions and animations are currently the preferred method for creating lightweight animations on websites. Unfortunately, many developers find their syntax to be complex and confusing. If this sounds like you, Move.js may be the perfect solution for you. Move.js is a simple JavaScript library that creates CSS3 animations using simple functions. This tutorial explores the basics of Move.js, and provides a live demo of Move in action.

The Basics

Move.js provides a simplified JavaScript API for creating CSS3 animations. Let’s assume that we have a div element of class box. We want to move it to 100px from the left when it is hovered over. In this case, our CSS code would look like this:

With Move.js we can simply use the set() method to achieve the same results, as shown below.

Getting Started

First, visit the Move.js GitHub page and download the latest package. Extract and copy the move.js file to your working directory. Next, include this file in your HTML page. A sample HTML file, with Move.js included, should look something like this:

We have defined a div element of class box, and a link with the ID playButton that will be used for our demo purpose. Let’s create a new styles.css file and add the following styles to it. Note that these styles are not needed by Move.js.

Our HTML page should now look like the following figure.

Now, let’s write our first Move.js snippet. We need to attach an onclick handler to the Play button that will move the box 100px to the right when clicked. The JavaScript code for this hander is shown below. This code adds transform: translateX(300px); to the box element.

The complete code, after adding the Move.js code, is shown below.

HTML

CSS

Move.js Methods

In the previous demo, we saw the x() method in action. Now, let’s learn about some of the other Move.js methods.

set(prop, val)

The set() method is used to set CSS properties on the element in question. It takes two arguments, the CSS property and its value. Example usages would be:

add(prop, val)

add() is used to increment a CSS property which is already set. The property must accept numeric values so that it can be incremented. This method takes two arguments, the CSS property and the amount of the increment.

When the previous snippet is called, it will add 200px to the existing value.

sub(prop, val)

sub() is the inverse of add(). It accepts the same two arguments, however the value is subtracted from the property value.

rotate(deg)

As the name suggests, this method rotates the element by the amount provided as the argument. This methods attaches, the CSS transform property to the element when called. For example, the following code rotates an element by 90 degrees.

This code will add the following CSS to the HTML element.

duration(n)

Using this method, you can specify how long the animation should take. For example, the following code tells Move.js to move the box to 200px from the left over two seconds.

Let’s look at another example. In the following code, Move.js will change the margin, set the background color, and rotate an element 90 degrees over two seconds.

translate(x[, y])

translate() is used to change the position of an element from its default position, using the coordinates provided as the arguments. If only one argument is provided, it will be used as the x-coordinate. If a second argument is provided, it is used as the y-coordinate.

x() and y()

Using x(), you can move adjust an element’s x-coordinate. Similarly, y() is used to move an element vertically. Both methods accept positive and negative values.

skew(x, y)

skew() turns an element to a provided angle with respect to both the x and y axis. This method can be segregated into skewX(deg) and skewY(deg).

scale(x, y)

This methods enlarges or compresses the HTML element’s size, as per the value provided to it. It uses the CSS3 transform’s scale method.

The above snippet will increase the height and width of the HTML element by three times.

ease(fn)

If you have used CSS3 transitions, you know about the ease function that is provided to the transition property. It specifies the behaviour of the transition. Various ease functions are in, out, in-out, snap, cubic-bezeir, etc. These functions can be provided using Move’s ease() method. For example:

end()

This method is used at the end of Move.js snippet. It marks the end of the animation. Technically, this method triggers the animation to play. The end() method also accepts an optional callback function. An example is shown below.

delay(n)

As the name implies, this method is used to delay the animation by a specified amount of time.

then()

This is one of the most important functions in Move.js. It will be used to divide the animation into two sets, which are executed in order. For example, the following animation contains two steps, which are divided by the call to then().

Creating Complex Animation using Move.js

In this tutorial, we have written many basic animations to look at the individual methods. Now, we’ll create a more complex animation easily using Move.js. This demo will clarify most of the concepts of the Move.js. We are going to create the animation depicted on this demo page. The Move.js code for this animation is shown below.

Conclusion

Hopefully, this tutorial has given you a clear understanding of what Move.js is, and how it can create CSS3 animations. Move.js can also help you organize all the animation code properly in a single place. Anytime you want to fix an animation, you know where it is!

 

Source Link: http://www.sitepoint.com/creating-css-animations-using-move-js/