How to create Timeline Animations using Anime.js ?
Anime.js is a lightweight JavaScript library with a simple and small powerful API. It works with the DOM element, CSS, and JavaScript object.
Prerequisites:
- Basic knowledge of HTML
- Basic knowledge of CSS
- Basic knowledge of Javascript
Installation of anime.js: There are two ways to use anime.js in your project:
- You can download the anime.min.js file and directly use it.
- Just google anime.js CDN and you will get the link and just put it in your script tag as shown below.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”></script>
Basic Properties used in anime.js:
- targets: The Css Selectors to target and identify on which animation has to apply.
- duration: Time in milliseconds for which animation should last.
- delay: Time in milliseconds after which animation starts.
- translateX: Places element at that x coordinate.
- translateY: Places element at Y coordinate.
- offset: This gives delay between different animations. i.e. to start another animation after x seconds of the previous one.
Creating an application and Project structure: This is a simple webPage. All we need to do is create a project and inside it create an HTML File named index.html.
mkdir animation && cd animation
touch index.html
Example 1:
index.html
HTML
<!DOCTYPE html>
< html >
< head >
< title >A nice example for timeline</ title >
< script src =
</ script >
< style >
html{
min-height: 200vh;
}
.ball {
width: 60px;
height: 60px;
margin-top: 120px;
margin-left:200px;
border-radius: 50%;
background-color: pink;
float: left;
}
</ style >
</ head >
< body >
< body >
< div class = "ball first" ></ div >
< div class = "ball second" ></ div >
< div class = "ball third" ></ div >
< script >
let animation = anime.timeline({
duration: 500,
easing: 'easeInOutSine',
direction: 'alternate',
autoplay:false,
loop: true
});
animation.add({
targets: '.first',
translateY: -50,
backgroundColor: 'rgb(255, 0, 0)'
}).add({
targets: '.second',
translateY: -50,
backgroundColor: 'rgb(0, 255, 0)'
}).add({
targets: '.third',
translateY: -50,
backgroundColor: 'rgb(0, 0, 255)'
});
window.onscroll=()=>{
animation.play();
}
</ script >
</ body >
</ html >
|
Output: Click on index.html to open it in browser:
Example 2: In this example, the translateX property becomes more clear. It first translates into -ve x axis and then +ve x axis.
index.html
HTML
<!DOCTYPE html>
< html >
< head >
< title >A nice example for timeline</ title >
< script src =
</ script >
< style >
html{
min-height:200vh;
}
.ball {
width: 200px;
height: 200px;
margin-top: 120px;
margin-left:200px;
background-color: pink;
float: left;
}
</ style >
</ head >
< body >
< body >
< div class = "ball first" ></ div >
< div class = "ball second" ></ div >
< div class = "ball third" ></ div >
< script >
let animation = anime.timeline({
duration: 400,
easing: 'easeInOutSine',
direction: 'alternate',
autoplay:false,
loop: true
});
animation.add({
targets: '.first',
translateX: [-100,100],
backgroundColor: 'rgb(255, 0, 0)',
}).add({
targets: '.second',
translateX: [-100,100],
backgroundColor: 'rgb(0, 255, 0)',
}).add({
targets: '.third',
translateX: [-100,100],
backgroundColor: 'rgb(0, 0, 255)',
});
window.onscroll=()=>{
animation.play()
}
</ script >
</ body >
</ html >
|
Output: Click on the index.html file to open it in the browser.
Last Updated :
27 Jul, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...