Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
Some Basic Properties used in Anime.js
targets − These are the CSS selectors that are used for targeting or identifying the animations that need to be applied.
duration − This is the amount of time in milliseconds for which the animation should last.
delay − This defines the time in milliseconds after which animation starts.
translateX − This places the element at the X coordinate.
translateY − This places the elements at the Y coordinate.
offset − This gives the delay between different animations i.e. the difference between another animation to start after the first animation.
Example
In this example, we have created a Simple pendulum using the Animation provided by the Anime.js.
# index.html
<!DOCTYPE html>
<html>
<head>
<title>Pendulum using Anime.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js">
</script>
<style>
#rod {
position: relative;
margin-top: 50px;
margin-left: 150px;
width: 2px;
height: 150px;
border-radius: 5px;
transform-origin: 50% 0%;
transform: rotate(60deg);
background-color: green;
}
#pivot {
position: absolute;
top: -5px;
left: -3px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: black;
}
#ball {
position: absolute;
bottom: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: orange;
}
</style>
</head>
<body>
<div id="rod">
<div id="pivot"></div>
<div id="ball"></div>
</div>
<script>
let animation = anime({
targets: '#rod',
rotate: [60, -60],
duration: 3000,
easing: 'easeInOutSine',
direction: 'alternate',
loop: true
});
</script>
</body>
</html>Output
302 Views
To Continue Learning Please Login