A lot of websites now use some sort of animation to make their landing pages more appealing. Thankfully, there are many libraries which allow you to animate elements on a webpage without doing everything from scratch. In this tutorial, you will learn about one such library called mojs.
The library is very easy to use because of its simple declarative API. The animations that you can create with mojs will all be smooth and retina ready so that everything looks professional.
Installing Mojs
There are many ways to include mojs in your projects. You can grab the library from its GitHub repository. Alternatively, you can directly include a link to the latest version of the library from different CDNs in your project.
<script src="//cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
Developers can also install mojs using package managers like npm and bower by running the following command:
npm install mo-js bower install mojs
Once you have included the library in your project, you can start using different modules to create interesting animations.
The HTML Module in Mojs
This tutorial will focus on the HTML module in the mojs library. This module can be used to animate different HTML elements on the webpage.
The first thing that you need to do in order to animate a DOM element is create a mojs Html object. You can specify the selector of an element and its properties that you want to animate inside this object.
Setting a value for el will let you identify the element which you want to animate using mojs. You can either set its value as a selector or a DOM node.
The HTML module has some predefined attributes which can be used to animate different transform-related properties of a DOM element. For example, you can control the translation animation of an element along the x, y and z axes by specifying start and end values for the x, y and z properties. You can also rotate any element along different axes by using the angleX, angleY and angleZ properties. This is similar to the corresponding rotateX(), rotateY() and rotateZ() transforms in CSS. You can also skew an element along the X or Y axis with the help of the skewX and skewY properties.
Applying scaling animations on different elements is just as easy. If you want to scale an element in both directions, simply set a value for the scale property. Similarly, you can animate the scaling of elements along different axes by setting appropriate values for the scaleX and scaleY properties.
Besides all these properties which let you set the initial and final values of the animation, there are some other properties which control the animation playback. You can specify the duration of the animation using the duration property. The provided value needs a number, and it will set the animation duration in milliseconds. If you want to start an animation after some delay, you can set the delay value using the delay property. Just like duration, delay also expects its value to be a number.
Animations can be repeated more than once with the help of the repeat property. Its default value is zero, which means that the animation would be played only once. Setting it to 1 will play the animation twice, and setting it to 2 will play the animation three times. Once the animation has completed its first iteration, the element will go back to its initial state and start animating again (if you have set a value for the repeat property). This sudden jump from the final state to initial state may not be desirable in all cases.
If you want the animation to play backwards once it has reached the final state, you can set the value of the isYoyo property to true. It is set to false by default. Finally, you can set the speed at which the animation should be played using the speed property. Its default value is 1. Setting it to 2 will play the animation twice as fast. Similarly, setting it to 0.5 will play the animation at half the speed.
The mojs Html objects that you created will not animate the respective elements by themselves. You will have to call the play() method on each mojs Html animation that you want to play. Here is an example which animates three different boxes using all the properties we just discussed:
var htmlA = new mojs.Html({
el: ".a",
x: {
0: 400
},
angleZ: {
0: 720
},
duration: 1000,
repeat: 4,
isYoyo: true
});
var htmlB = new mojs.Html({
el: ".b",
x: {
400: 0
},
angleY: {
0: 360
},
angleZ: {
0: 720
},
duration: 1000,
repeat: 4
});
var htmlC = new mojs.Html({
el: ".c",
x: {
0: 400
},
angleY: {
0: 360
},
scaleZ: {
1: 2
},
skewX: {
0: 30
},
duration: 1000,
repeat: 4,
isYoyo: true
});
document.querySelector(".play").addEventListener("click", function() {
htmlA.play();
htmlB.play();
htmlC.play();
});
You are not limited to just animating the transform properties of an element. The mojs animation library allows you to animate all other animatable CSS properties as well. You just have to make sure that you provide valid initial and final values for them. For instance, you can animate the background color of an element by specifying valid values for background.
If the CSS property that you want to animate contains a hyphen, you can remove the hyphen and convert the property name to camelCase when setting initial and final values inside the mojs Html object. This means that you can animate the border-radius by setting a valid value for the borderRadius property. The following example should make everything clear:
var htmlA = new mojs.Html({
el: ".a",
x: {
0: 400
},
angleZ: {
0: 360
},
background: {
red: 'black'
},
borderWidth: {
10: 20
},
borderColor: {
'black': 'red'
},
borderRadius: {
0: '50%'
},
duration: 2000,
repeat: 4,
isYoyo: true
});
document.querySelector(".play").addEventListener("click", function() {
htmlA.play();
});
In the above example, the border color changes from black to red while the border radius animates from 0 to 50%. You should note that a unitless number will be considered a pixel value, while a number with units should be specified as a string like '50%'.
So far we have used a single set of tween properties to control the playback of different animations. This meant that an element would take the same time to move from x:0 to x:200 as it will take to scale from scale:1 to scale:2.
This may not be a desirable behavior as you might want to delay the animation of some properties and control their duration as well. In such cases, you can specify the animation playback parameters of each property inside the property object itself.
var htmlA = new mojs.Html({
el: ".a",
x: {
0: 400,
duration: 1000,
repeat: 8,
isYoyo: true
},
angleY: {
0: 360,
delay: 500,
duration: 1000,
repeat: 4,
isYoyo: true
},
angleZ: {
0: 720,
delay: 1000,
duration: 1000,
repeat: 4,
isYoyo: true
}
});
document.querySelector(".play").addEventListener("click", function() {
htmlA.play();
});
Easing Functions Available in Mojs
Every animation that you create will have the sin.out easing applied to it by default. If you want the animation playback to progress using a different easing function, you can specify its value using the easing property. By default, the value specified for easing is also used when the animation is playing backwards. If you want to apply a different easing for backward animations, you can set a value for the backwardEasing property.
The mojs library has 11 different built-in easing functions. These are linear, ease, sin, quad, cubic, quart, quint, expo, circ, back, and elastic. The linear easing only has one variation named linear.none. This makes sense because the animation will progress with the same speed at different stages. All other easing functions have three different variations with in, out and inout appended at the end.
There are two methods to specify the easing function for an animation. You can either use a string like elastic.in or you can access the easing functions directly using the mojs.easing object like mojs.easing.elastic.inout. In the embedded CodePen demo, I have applied different easing functions on each bar so its width will change at a different pace. This will give you an idea of how the animation speed differs with each easing.
var allBoxes = document.querySelectorAll(".box");
var animations = new Array();
var easings = ['ease.in', 'sin.in', 'quad.in', 'cubic.in', 'quart.in', 'quint.in', 'expo.in', 'circ.in', 'back.in', 'elastic.in'];
allBoxes.forEach(function(box, index) {
var animation = new mojs.Html({
el: box,
width: {
0: 550,
duration: 4000,
repeat: 8,
isYoyo: true,
easing: easings[index]
}
});
animations.push(animation);
});
document.querySelector(".play").addEventListener("click", function() {
animations.forEach(function(anim) {
anim.play();
});
});
Since we only want to change the easing function applied to each box, I have created a loop to iterate over them and then apply an easing function picked up from the easings array. This prevents unnecessary code duplication. You can use the same technique to animate multiple elements where the property values vary based on a pattern.
Controlling Animation Playback
Mojs provides a lot of methods which allow us to control the animation playback for different elements once it has already started. You can pause the animation at any time by calling the pause() method. Similarly, you can resume any paused animation by calling the resume() method.
Animations that have been paused using pause() will always resume from the point at which you called pause(). If you want the animation to start from the beginning after it has been paused, you should use the stop() method instead.
You can also play the animation backwards using the playBackward() method. Earlier, we used the speed property to control the speed at which mojs played an animation. Mojs also has a setSpeed() method which can set the animation speed while it is still in progress. In the following example, I have used all these methods to control the animation playback based on button clicks.
var speed = 1;
var htmlA = new mojs.Html({
el: ".a",
angleZ: {
0: 720
},
borderRadius: {
0: '50%'
},
borderWidth: {
10: 100
},
duration: 2000,
repeat: 9999,
isYoyo: true
});
document.querySelector(".play").addEventListener("click", function() {
htmlA.play();
});
document.querySelector(".pause").addEventListener("click", function() {
htmlA.pause();
});
document.querySelector(".stop").addEventListener("click", function() {
htmlA.stop();
});
document.querySelector(".faster").addEventListener("click", function() {
speed = speed + 1;
htmlA.setSpeed(speed);
document.querySelector(".data").innerHTML = "Speed: " + speed;
});
document.querySelector(".slower").addEventListener("click", function() {
speed = speed/2;
htmlA.setSpeed(speed);
document.querySelector(".data").innerHTML = "Speed: " + speed;
});
In the following demo, the current animation playback speed is shown in the black box in the bottom left corner. Clicking on Faster will increase the current speed by 1, and clicking on Slower will halve the current speed.
Final Thoughts
In this tutorial, we learned how to animate different DOM elements on a webpage using the HTML module in mojs. We can specify the element we want to animate using either a selector or a DOM node. The library allows you to animate different transform properties and the opacity of any element using the built-in properties of the mojs Html object. However, you can also animate other CSS properties by specifying the name using camelCase notation.
JavaScript is not without its learning curves, and there are plenty of frameworks and libraries to keep you busy, as well. If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato Market.
Let me know if there is anything you would like me to clarify in this tutorial. We will cover the Shape module from the mojs library in the next tutorial.
No comments:
Post a Comment