IT-школа
Creating animations with JavaScript and Anime.js
JavaScript animation is a powerful way to make your website or web application more lively and interesting for users. In this article, we’ll look at how to create a simple animation in JavaScript using the Anime.js animation library.
Step 1: Prepare the working environment
First of all, we need to create an HTML file and link the Anime.js library. Create a new file called ‘index.html’ and add the following code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Animation with Anime.js</title>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js”></script>
<style>
#animatedElement {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
</style>
</head>
<body>
<div id=”animatedElement”></div>
<script>
// The JavaScript code to create the animation will be here
</script>
</body>
</html>
In this code, we have linked the Anime.js library and created a ‘div’ block with an id of ‘animatedElement’ that will be animated.
Dynamics according to your rules: animation in JavaScript!
Step 2: Create an animation with Anime.js
Now let’s add the JavaScript code that will create our animation. Insert the following code between the <script> and </script> tags in your index.html file:
// Create an animation with Anime.js
var animatedElement = document.getElementById(‘animatedElement’);
anime({
targets: animatedElement,
translateX: 250, // Offset along the X axis
translateY: 150, // Offset along the Y axis
rotate: ‘1turn’, // Rotate 360 degrees
duration: 2000, // Animation duration in milliseconds
easing: ‘easeInOutQuad’ // Kind of motion effect
});
In this code, we use Anime.js to animate an element with the id ‘animatedElement’. We set various animation parameters such as X and Y displacement, rotation, and duration.
Step 3: View the result
Save your ‘index.html’ file and open it in a web browser. You should see the ‘animatedElement’ block being animated according to the parameters you specified.
In this article, we showed you how to easily create a simple animation using JavaScript and the Anime.js animation library. Using these tools, you can create exciting animations for your websites and web applications.
Feel free to experiment and expand on these concepts to create your unique animations. If you are just starting your programming journey, we have a JavaScript course for you. This course covers all aspects of this language from scratch, so it is suitable for both beginners and experienced programmers from 10 years old. Lessons are held at a time convenient for you online or at the office in Akademmistechko, Zhytomyrska.
