Performant Animations Using KUTE.js: Part 2, Animating CSS Properties

The first tutorial of the series focused on providing a beginner-friendly introduction to the KUTE.js library. In that tutorial, we only animated the opacity and rotateZ property for our elements. In this tutorial, you will learn how to animate the rest of the CSS properties using KUTE.js. 

Some of these properties will require you to load the CSS plugin, while others can be animated using the core engine itself. Both these scenarios will be discussed separately in the tutorial.

Box Model Properties

The core KUTE.js engine can animate only the most common box model properties: width, height, top, and left. You will have to use the CSS plugin to animate almost all other box model properties. Here is an example that animates the top position, width and height of our boxes from the previous tutorial:

var animateTop = KUTE.allFromTo(
  theBoxes,
  { top: 0 },
  { top: 100 },
  { offset: 100 }
);

var animateA = KUTE.fromTo(
  boxA,
  { height: 100 },
  { height: 175 }
);

var animateB = KUTE.fromTo(
  boxB,
  { width: 100 },
  { width: 200 }
);

You might have noticed that I used allFromTo() to animate the top property of all the boxes. However, I used fromTo() to animate individual boxes. You should remember that the boxes stay in their final state once the animation completes.

With the help of the CSS plugin, you will be able to animate margin, padding, and borderWidth as well. Once you have included the plugin in your project, the rest of the process is exactly the same.

Animating Transform Properties

You can animate almost all the transform properties mentioned in the spec with the help of the core engine itself. There is no need to load the CSS plugin in this case.

You can animate the element translation in 2D space using translate. Similarly, you can use translateX, translateY, and translateZ in order to animate the elements along the respective axes. For the translateZ property to have any effect, you will also have to set a value for the parentPerspective property. Here is an example:

var animateAll = KUTE.allFromTo(
  theBoxes,
  { translateY: 0 },
  { translateY: 100 },
  { offset: 1000 }
);

var animateA = KUTE.fromTo(
  boxA,
  { translateZ: 0 },
  { translateZ: 50 },
  { parentPerspective: 100, parentPerspectiveOrigin: "0% 0%" }
);

var animateB = KUTE.fromTo(
  boxB,
  { translateX: 0 },
  { translateX: -200 }
);

startButton.addEventListener(
  "click",
  function() {
    animateAll.start();
    animateA.start();
    animateB.start();
  },
  false
);

If you click the Start Animation button and observe the animation closely, you will see that the red box translates -200 in the X direction first. After that, it moves to its original position and starts translating in the Y direction. The reason for the box to animate translateX first is that we have added a delay for the translateY animation using the offset property.

Just like translation, you can also perform rotations along a specific axis using the rotate, rotateX, rotateY, and rotateZ properties. Since rotateX and rotateY are 3D rotations, you will have to use the perspective property for the rotation animation to work as expected. The following example shows how using the perspective property affects the overall animation for these two properties.

var animateAll = KUTE.allFromTo(
  theBoxes,
  { rotate: 0 },
  { rotate: 360 },
  { offset: 1000 }
);

var animateA = KUTE.fromTo(
  boxA,
  { rotateY: 0 },
  { rotateY: 180 },
  { perspective: 100 }
);

var animateB = KUTE.fromTo(
  boxB,
  { rotateY: 0 },
  { rotateY: -180 }
);

startButton.addEventListener(
  "click",
  function() {
    animateAll.start();
    animateA.start();
    animateB.start();
  },
  false
);

In the above example, box A and box B start their rotation along the Y axis at the same time, but the resulting animation is very different because of the perspective property. You might have noticed that the orange box is not performing the rotation around its center that was applied to it using animateAll. This is because all animations have a duration of 500 milliseconds by default, and we are applying both animateAll and animateA on the orange box at the same time. 

Since animateA is applied after animateAll, its animation takes precedence over animateAll. You will see that the common rotation using animateAll is still being applied on the orange box once you increase the animation duration. In other words, you cannot animate different transform properties using multiple tween objects at the same time. All the transform properties that you want to animate should be specified inside a single tween object. The following example should make it clear:

// This will not work as expected
var translateAll = KUTE.allFromTo(
  theBoxes,
  { translateY: 0 },
  { translateY: 100 },
  { offset: 1000 }
);

var rotateAll = KUTE.allFromTo(
  theBoxes,
  { rotate: 0 },
  { rotate: 360 },
  { offset: 1000 }
);

startButton.addEventListener(
  "click",
  function() {
    translateAll.start();
    rotateAll.start();
  },
  false
);

// This will work as expected
var rtAll = KUTE.allFromTo(
  theBoxes,
  { translateY: 0, rotate: 0 },
  { translateY: 100, rotate: 360 },
  { offset: 1000 }
);

startButton.addEventListener(
  "click",
  function() {
    rtAll.start();
  },
  false
);

Using the CSS Plugin

As I mentioned earlier, not all CSS properties can be animated using only the core KUTE.js engine. You need to use an extra CSS plugin to animate properties like padding, margin, background position of images, and other border-related properties. So, before you try any of the examples in this section, you should include the plugin in your project.

Once you have included the plugin, you will be able to animate the border-radius property using borderRadius. You can also animate all the corner border-radius values individually using borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, and borderBottomRightRadius. Here is an example that shows the animation in action.

If you click the Start Animation button, you will notice that the top left border-radius for the red and yellow box is animated after a delay. This is because of the offset property. The rest of the radii are animated as soon as we click on the button. The above example was created using the following code:

var animateAll = KUTE.allFromTo(
  theBoxes,
  { borderTopLeftRadius:'0%' },
  { borderTopLeftRadius:'100%' },
  { offset: 1000 }
);

var animateA = KUTE.fromTo(
  boxA,
  { borderTopRightRadius:'0%' },
  { borderTopRightRadius:'100%' }
);

var animateB = KUTE.fromTo(
  boxB,
  { borderBottomLeftRadius:'0%' },
  { borderBottomLeftRadius:'100%' }
);

var animateC = KUTE.fromTo(
  boxC,
  { borderBottomRightRadius:'0%' },
  { borderBottomRightRadius:'100%' }
);

startButton.addEventListener(
  "click",
  function() {
    animateAll.start();
    animateA.start();
    animateB.start();
    animateC.start();
  },
  false
);

We have not chained the tween objects together, so all the animations start at once this time. You can also animate the color of different borders in a similar manner using borderColor, borderTopColor, borderLeftColor, borderBottomColor, and borderRightColor. 

Final Thoughts

In this tutorial, we learned about different CSS properties that can be animated with and without the use of the KUTE.js CSS plugin. If you have any questions, please let me know in the comments.

The next tutorial will cover different animations that can be created using the KUTE.js SVG plugin.