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.
Powered by WPeMatico