animationend

16 March, 2023

Contributors

Milsaware

@milsaware

About

The animationend event is a built-in event in JavaScript that is triggered when a CSS animation has completed. This event allows developers to perform actions in response to the end of an animation, such as starting a new animation or updating the UI.

When an animation is applied to an element using the animation property in CSS, the animationend event is automatically triggered when the animation has completed. This event can be captured using JavaScript to perform additional actions in response to the end of the animation. For example, you could use the animationend event to trigger another animation, change the colour or position of an element, or update some other aspect of the UI.

Event listener

Here's an example of how you can use the animationend event in JavaScript:

CSS

.box {
    width: 50px;
    height: 50px;
    background-color: red;
    animation: move 2s linear;
}

@keyframes move {
    from { transform: translateX(0); }
    to { transform: translateX(200px); }
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>animationend example</title>
    </head>
    <body>
        <div id="myElement" class="box"></div>
    </body>
</html>

JavaScript

const box = document.querySelector('.box');

box.addEventListener('animationend', () => {
    console.log('Animation has ended!');
    box.style.backgroundColor = 'green';
});

Here, a red box is animated to move to the right using CSS animations. When the animation ends, the background colour of the box is changed to green using the animationend event with an event listener in JavaScript.

Property

You can also use the onanimationend property to attach an event listener to the animationend event directly on an element:

const animatedElement = document.getElementById('myElement');

animatedElement.onanimationend = () => {
    console.log('The animation has ended.');
};

Here, the onanimationend property is set to a function that logs a message to the console when the animationend event is triggered on the animatedElement.

Inline

The animationend event can also be used in inline HTML using the onanimationend attribute. For example:

<div id="myElement" onanimationend="console.log('Animation has ended!')"></div>

In this case, the function simply logs a message to the console saying "Animation has ended!" using the console.log() method.

Note that using inline event handlers can make your code harder to read and maintain, especially if you have a lot of them. It's generally considered better practice to separate your JavaScript code from your HTML code by using event listeners.

Programmatic trigger

You can also trigger the animationend event programmatically using the dispatchEvent() method.

Here's an example of how you could programmatically trigger the animationend event on a div element using the aforementioned CSS and HTML content:

const element = document.querySelector('#myElement');

element.addEventListener('animationend', () => {
    console.log('Animation has ended!');
    element.style.backgroundColor = 'green';
});

setTimeout(() => {
    element.dispatchEvent(new Event('animationend'));
}, 2000);

Here, we have added an event listener for the animationend event on the div element with an id of "myElement". When the animation ends, the event listener logs a message to the console and changes the background colour of the div element to green.

We also added a setTimeout function that will dispatch the animationend event after 2 seconds, which is the duration of the animation. The dispatchEvent method is used to manually trigger the event.

javascript