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:

.box {
  -webkit-transition: margin 1s;
  -moz-transition: margin 1s;
  -o-transition: margin 1s;
  transition: margin 1s;
}
.box:hover {
  margin-left: 100px;
}

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

move('.box')
  .set('margin-left', 100)
  .end();

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:

<!DOCTYPE html>
<html>
  <head>
    <title>Move.js Demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css"> 
  </head>
  <body>
    <a href="#" id="playButton">Play</a>
    <div class="box"></div>
    <script type="text/javascript" src="js/move.js"></script>
  </body>
</html>

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.

.box {
  margin: 10px;
  width: 100px;
  height: 100px;
  background: #7C9DD4;
  box-shadow: 5px 5px 0px #D1D1D1;
}
#playButton {
  display: block;
  font-size: 20px;
  margin: 20px 10px;
  font-weight: bold;
  color: #222;
  text-decoration: none;
}

Our HTML page should now look like the following figure. enter image description here

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.

document.getElementById('playButton').onclick = function(e) {
  move('.box')
    .x(300)
    .end();
};

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

<!DOCTYPE html>
<html>
  <head>
    <title>Move.js Demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css"> 
  </head>
  <body>
    <a href="#" id="playButton">Play</a>
    <div class="box"></div>
    <script type="text/javascript" src="js/move.js"></script>
    <script type="text/javascript">
      document.getElementById('playButton').onclick = function(e){
        move('.box')
          .x(300)
          .end();
      };
    </script>
  </body>
</html>

CSS

.box {
  margin-left: 10px;
  width: 100px;
  height: 100px;
  background: #7C9DD4;
  box-shadow: 5px 5px 0px #D1D1D1;
}
#playButton {
  display: block;
  font-size: 20px;
  margin: 20px 10px;
  font-weight: bold;
  color: #222;
  text-decoration: none;
}

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:

.set('background-color', '#CCC')
.set('margin-left', 500)
.set('color', '#222')

`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.

.add('margin-left', 200)

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.

.sub('margin-left', 200)

`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.

.rotate(90)

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

transform: rotate(90deg);

`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.

.set('margin-left', 200)
.duration('2s')

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.

.set('margin-left', 200)
.set('background-color', '#CCC')
.rotate(90)
.duration('2s')

`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.

.translate(200, 400)

`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.

.x(300)
.y(-20)

`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).

.skew(30, 40)

`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.

.scale(3, 3)

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:

.ease('in').x(400)
.ease('cubic-bezier(0,1,1,0)').x(400)

`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.

move('.box')
  .set('background-color', 'red')
  .duration(1000)
  .end(function() {
    alert("Animation Over!");
  });

`delay(n)`

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

move('.box')
  .set('background-color', 'red')
  .delay(1000)
  .end();

`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().

move('.box')
  .set('background-color', 'red')
  .x(500)
  .then()
  .y(400)
  .set('background-color', 'green')
  .end();

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.

move('.square')
  .to(500, 200)
  .rotate(180)
  .scale(.5)
  .set('background-color', '#FF0551')
  .set('border-color', 'black')
  .duration('3s')
  .skew(50, -10)
  .then()
  .set('opacity', 0)
  .duration('0.3s')
  .scale(0.1)
  .pop()
  .end();

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! Please check out the source code for this article, and read the following resources related to animations using CSS and JS.

If you have any suggestions or questions related to this article, please leave a comment below. We will be happy to hear from you. Happy coding!

Frequently Asked Questions about Creating CSS Animations Using Move.js

How do I install Move.js for my project?

To install Move.js, you need to use the Node Package Manager (npm). First, ensure that you have Node.js and npm installed on your computer. If not, download and install them from the official Node.js website. Once installed, open your terminal or command prompt and navigate to your project directory. Then, type the following command: npm install move-js. This will install Move.js in your project.

How do I start creating animations with Move.js?

To start creating animations with Move.js, you first need to include the Move.js script in your HTML file. You can do this by adding a script tag with the source set to the Move.js file. Once the script is included, you can start creating animations by creating a new Move instance and defining the animation properties.

Can I use Move.js to animate multiple elements at once?

Yes, you can animate multiple elements at once using Move.js. To do this, you need to create a new Move instance for each element you want to animate. Then, define the animation properties for each instance separately. This allows you to control the animation of each element individually.

How can I control the duration of the animation in Move.js?

You can control the duration of the animation in Move.js by using the .duration() method. This method takes a single argument, which is the duration of the animation in milliseconds. For example, if you want the animation to last for 2 seconds, you would use .duration(2000).

Can I chain animations in Move.js?

Yes, you can chain animations in Move.js. This is done by calling multiple animation methods on the same Move instance. The animations will be executed in the order they were defined. This allows you to create complex animations with multiple steps.

How can I pause and resume animations in Move.js?

Unfortunately, Move.js does not provide built-in methods to pause and resume animations. However, you can achieve this by using JavaScript’s setTimeout and clearTimeout functions. You would need to start the animation with a delay using setTimeout, and then stop it by calling clearTimeout.

Can I use Move.js with other JavaScript libraries?

Yes, you can use Move.js with other JavaScript libraries. Move.js is a standalone library, which means it does not depend on any other libraries to work. However, it can be used alongside other libraries without any issues.

How can I add easing to my animations in Move.js?

You can add easing to your animations in Move.js by using the .ease() method. This method takes a string argument, which is the name of the easing function you want to use. Move.js supports several easing functions, including ‘in’, ‘out’, ‘in-out’, and ‘snap’.

Can I animate CSS transforms with Move.js?

Yes, you can animate CSS transforms with Move.js. This is done by using the .translate(), .rotate(), .scale(), and .skew() methods. These methods allow you to animate the translation, rotation, scaling, and skewing of an element, respectively.

How can I debug animations in Move.js?

Debugging animations in Move.js can be done by using the browser’s developer tools. You can inspect the animated element and check its computed styles to see the current state of the animation. Additionally, you can use JavaScript’s console.log function to log the state of the Move instance at different points in the animation.

Creating CSS Animations Using Move.js

The Basics

Getting Started

Move.js Methods

set(prop, val)

add(prop, val)

sub(prop, val)

rotate(deg)

duration(n)

translate(x[, y])

x() and y()

skew(x, y)

scale(x, y)

ease(fn)

end()

delay(n)

then()