Welcome to the second tutorial in this series on animating with anime.js! In the previous post, "Become an Animation Master with Anime.js - Setting up the Environment and Basic Animations", we went through setting up the environment for creating animations with anime.js and I explained the basics with different examples.
In this tutorial, we'll cover some advanced techniques for timing, easing, and keyframes in anime.js.
Before we move on, remember you can build your websites, landing pages, APIs, and more, with or without coding on DoTenX for free. Make sure to check it out and even nominate your work to be showcased.DoTenX is open-source and you can find the repository here: github.com/dotenx/dotenx.
Timing
Timing is one of the key aspects of animation. In anime.js, you can use the duration
property (in milliseconds) to specify the length of an animation. We can also use the delay
property which is also in milliseconds, to specify a delay before the animation starts.
For example, let's say you want to animate an element's position from left to right over the course of 1 second, with a delay of half a second before the animation starts:
<div id="#box"></div>
#box {
margin-left: 200px;
margin-top: 200px;
width: 100px;
height: 100px;
background: blue;
}
anime({
targets: '#my-element',
translateX: ['0px', '200px'],
duration: 1000, // 1 second
delay: 500, // half a second
});
We can also use the loop
property to specify that the animation should loop indefinitely.
anime({
targets: '#box',
translateX: ['0px', '200px'],
duration: 1000,
loop: true,
});
Easing
We mentioned the timing and now let's take a look at another very important aspect of animation, easing. In simple terms, easing refers to the way the animation accelerates and decelerates over time. In anime.js, we have a property named easing
that we can use to specify the easing function to use for the animation.
Anime.js offers a long list of built-in easing functions such as 'linear'
, 'easeInQuad'
, and 'easeOutQuad'
. Usually, the default options are good enough, but you can also use the bezier
function to create custom easing curves.
You can find the complete list here.
For example, let's animate an element's position using a custom easing curve:
anime({
targets: '#box',
translateX: ['0px', '200px'],
duration: 1000,
easing: anime.bezier(0.5, 0, 0.5, 1),
});
This will animate the element's position using a custom easing curve that starts and ends slowly, with a faster rate of change in the middle.
Keyframes
Keyframes refer to states in our animations. So far we have use the default behaviour which starts with a default from
value and animates the element by updating the value to get to the so-called to
value.
However, in anime.js, we can specify a series of intermediate states for the animation and create complex animations.
For example, let's say you want to animate an element's position from left to right, with a bounce at the end:
anime({
targets: '#box',
translateX: [
{value: '0px', duration: 1000}, // starting position
{value: '200px', duration: 1000}, // intermediate position
{value: '100px', duration: 500}, // bounce position
{value: '300px', duration: 1000}, // ending position
],
easing: 'easeInOutQuad',
});
This will animate the element's position from 0px
to 300px
over the course of 4 seconds, with a bounce at the 200px
position. The animation is using the easeInOutQuad
easing function for all the keyframes and different durations for each keyframe. We could also set different delays or easing functions for each keyframe.
We can also set multiple properties at the same time in each keyframe. For example, let's animate the element's position and opacity simultaneously:
anime({
targets: '#box',
translateX: [
{value: '0px', duration: 1000},
{value: '200px', duration: 1000},
],
opacity: [
{value: 0, duration: 1000},
{value: 1, duration: 1000},
],
easing: 'easeInOutQuad',
});
Another way to create keyframes is to use the keyframes
property to specify the intermediate states.
Let's take a look at an example using the keyframes
property.
anime({
targets: '#box',
keyframes: [
{translateX: 300},
{translateX: 0},
{translateX: 200},
{translateX: 100},
],
duration: 3000,
easing: 'easeOutQuad',
direction: 'alternate',
loop: true
});
In the next tutorial, we'll go through advanced animations with anime.js with a focus on chaining, sequencing, and staggering, so stay tuned.
Don't forget to visit DoTenX and soon a dedicated animation section will be added to the platform allowing you to create amazing animations with the concepts you learned here. Keep an eye on the Github repository for the new release.
Top comments (0)