Your First Animation

To create your first animation with Anime.js, you start by selecting the element you want to animate. In this case, you use a div with the id "box". This box is styled with a fixed width and height, a blue background, and an initial position on the page using CSS. The opacity is set to 0.5 so you can see the change as it animates.

Next, you include the Anime.js library by adding a script tag with its CDN link. This allows you to use Anime.js functions in your script.

The animation itself is triggered by calling the anime function. You pass in an object that describes what you want to animate:

• The targets property specifies which element to animate. Here, you target the box using "#box";
• You define the properties to animate. Setting left: '400px' moves the box horizontally, and opacity: 1 makes it fully visible;
• The duration property sets how long the animation will take in milliseconds. Here, the animation lasts 2000 milliseconds (2 seconds);
• The easing property controls the speed curve of the animation. Using 'easeInOutQuad' creates a smooth start and end.

When the script runs, Anime.js automatically animates the box: it slides from its original position to 400px from the left and fades in to full opacity.