Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Timeline Animations using Anime.js?
In this article, we are going to explore and learn about Timeline Animations. Anime.js is a lightweight JavaScript library that has a small but powerful set of APIs. It works upon the DOM attributes, CSS properties, SVG, and JavaScript objects.
We can build multiple and complex animations using the Anime.js. Anime's built-in staggering system helps in making complex follow through and overlapping animations simple. It can also be used on both timings and properties.
How to use Anime.js?
We can import or use Anime.js in our code in the following two ways:
-
We can either download the anime.min.js file and directly use it inside our project.
-
We can use the anime.js CDN link hosted on some open page websites. By using this we do not need to add the Anime.js to our project and thus can directly use it from the external source.
Anime.js CDN Link
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
Timeline Animation Properties
Timeline animations allow you to synchronize multiple animations and control their timing. Here are the key properties:
-
targets ? CSS selectors that identify the elements to animate.
-
duration ? Animation duration in milliseconds.
-
delay ? Time in milliseconds before animation starts.
-
offset ? Defines when an animation starts relative to the previous one in a timeline.
-
translateX/translateY ? Moves elements along X or Y axis.
Basic Timeline Animation
A timeline allows you to sequence multiple animations. Here's how to create a simple timeline:
<!DOCTYPE html>
<html>
<head>
<title>Basic Timeline Animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background: #3498db;
margin: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<script>
// Create timeline
let tl = anime.timeline({
easing: 'easeOutExpo',
duration: 750
});
// Add animations to timeline
tl.add({
targets: '#box1',
translateX: 250
})
.add({
targets: '#box2',
translateX: 250,
offset: '-=600' // Start 600ms before previous ends
})
.add({
targets: '#box3',
translateX: 250,
offset: '-=600'
});
</script>
</body>
</html>
Advanced Timeline with Staggering
Staggering creates delays between similar elements for smoother visual effects:
<!DOCTYPE html>
<html>
<head>
<title>Staggered Timeline Animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<style>
.circle {
width: 40px;
height: 40px;
background: #e74c3c;
border-radius: 50%;
display: inline-block;
margin: 5px;
transform: scale(0);
}
.container {
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<script>
let timeline = anime.timeline({
easing: 'easeInOutQuad',
direction: 'alternate',
loop: true
});
timeline.add({
targets: '.circle',
scale: [0, 1],
duration: 500,
delay: anime.stagger(100) // 100ms delay between each
})
.add({
targets: '.circle',
translateY: -50,
duration: 800,
delay: anime.stagger(50),
offset: '-=400'
});
</script>
</body>
</html>
Pendulum Animation Example
Here's a more complex timeline animation creating a pendulum effect:
<!DOCTYPE html>
<html>
<head>
<title>Pendulum Timeline Animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<style>
#rod {
position: relative;
margin: 50px auto 0;
width: 2px;
height: 150px;
border-radius: 5px;
transform-origin: 50% 0%;
transform: rotate(60deg);
background-color: #2c3e50;
}
#pivot {
position: absolute;
top: -5px;
left: -3px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #34495e;
}
#ball {
position: absolute;
bottom: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #e67e22;
}
</style>
</head>
<body>
<div id="rod">
<div id="pivot"></div>
<div id="ball"></div>
</div>
<script>
anime({
targets: '#rod',
rotate: [60, -60],
duration: 2000,
easing: 'easeInOutSine',
direction: 'alternate',
loop: true
});
</script>
</body>
</html>
Timeline Control Methods
Timeline animations can be controlled with these methods:
- timeline.play() ? Start the timeline
- timeline.pause() ? Pause the timeline
- timeline.restart() ? Restart from beginning
- timeline.reverse() ? Play in reverse
Conclusion
Timeline animations in Anime.js provide powerful control over complex animation sequences. Use timelines to orchestrate multiple elements and create sophisticated visual effects with staggering and offset properties.
516 Views
