JavaScript AnimationEvent animationName Property: Retrieving Animation Names
The animationName property of the JavaScript AnimationEvent interface is a crucial tool for managing CSS animations in your web applications. When an animation event such as animationstart, animationend, or animationiteration occurs, this property provides the name of the CSS animation that triggered the event. This allows developers to write dynamic JavaScript code that responds specifically to different animations applied to an element.
Understanding the animationName Property
The animationName property returns a string representing the name of the CSS animation that initiated the animation event. This name corresponds to the @keyframes rule that defines the animation sequence in CSS. It’s especially useful when you have multiple animations applied to a single element and need to determine which animation is currently triggering events.
Purpose of the animationName Property
The primary purpose of the animationName property is to:
- Identify Animations: Determine which animation is running or has completed on a target element.
- Conditional Logic: Execute specific JavaScript logic based on the animation name.
- Dynamic Control: Allow for targeted manipulation of animation behavior in complex web interfaces.
- Event Handling: Precisely manage animation events and their corresponding effects.
Syntax
The syntax for accessing the animationName property within an AnimationEvent is straightforward:
event.animationName;
Where event is the AnimationEvent object passed to an event listener attached to animation events (e.g., animationstart, animationend, animationiteration).
Examples of animationName Property in Action
Let’s explore the practical application of the animationName property using various examples. Each example includes the necessary HTML, CSS, and JavaScript code to demonstrate different usage scenarios.
Basic Usage: Logging Animation Names
This example demonstrates how to use the animationName property to log the name of the animation that has started to the console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Name Example</title>
<style>
.animated-box-1 {
width: 100px;
height: 100px;
background-color: lightblue;
animation: move-right-1 2s linear;
}
@keyframes move-right-1 {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
</style>
</head>
<body>
<div class="animated-box-1" id="box1"></div>
<script>
const box1 = document.getElementById('box1');
box1.addEventListener('animationstart', (event) => {
console.log('Animation Started:', event.animationName);
});
</script>
</body>
</html>
Output:
When the animation starts, the console will output:
Animation Started: move-right-1
In this example, the animationstart event listener is attached to the box1 element. When the move-right-1 animation starts, the event listener captures the event, and the animationName property retrieves the animation name (“move-right-1”), which is then logged to the console.
Multiple Animations: Differentiating Animation Events
This example shows how to differentiate between animation events when multiple animations are applied to a single element using the animationName property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Animation Names Example</title>
<style>
.animated-box-2 {
width: 100px;
height: 100px;
background-color: lightgreen;
animation: move-right-2 2s linear, rotate-2 2s ease-in-out;
}
@keyframes move-right-2 {
from { transform: translateX(0); }
to { transform: translateX(150px); }
}
@keyframes rotate-2 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="animated-box-2" id="box2"></div>
<script>
const box2 = document.getElementById('box2');
box2.addEventListener('animationstart', (event) => {
console.log('Animation Started:', event.animationName);
if (event.animationName === 'move-right-2') {
console.log('Moving Right Animation Started!');
} else if (event.animationName === 'rotate-2') {
console.log('Rotating Animation Started!');
}
});
</script>
</body>
</html>
Output:
When the animation starts, the console will output:
Animation Started: move-right-2
Moving Right Animation Started!
Animation Started: rotate-2
Rotating Animation Started!
Here, the box2 element has two animations: move-right-2 and rotate-2. The animationstart event listener logs the name of the animation that started, and uses a conditional if statement based on animation name to execute specific logic.
Using animationName with animationiteration Event
This example demonstrates how to use the animationName property with the animationiteration event to log the name of the animation whenever it repeats.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Iteration Example</title>
<style>
.animated-box-3 {
width: 100px;
height: 100px;
background-color: lightcoral;
animation: scale-3 1s linear infinite;
}
@keyframes scale-3 {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="animated-box-3" id="box3"></div>
<script>
const box3 = document.getElementById('box3');
box3.addEventListener('animationiteration', (event) => {
console.log('Animation Iteration:', event.animationName);
});
</script>
</body>
</html>
Output:
The console will continuously output each time the animation repeats:
Animation Iteration: scale-3
Animation Iteration: scale-3
...
In this case, the animationiteration event listener logs the name of the animation scale-3 each time the animation completes one cycle.
Using animationName with animationend Event
This example uses the animationend event along with animationName to perform actions when specific animations complete.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation End Example</title>
<style>
.animated-box-4 {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: fade-in-4 1s linear;
}
@keyframes fade-in-4 {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="animated-box-4" id="box4" style="opacity: 0;"></div>
<script>
const box4 = document.getElementById('box4');
box4.addEventListener('animationend', (event) => {
console.log('Animation Ended:', event.animationName);
if (event.animationName === 'fade-in-4') {
alert('Fade-in animation completed!');
}
});
</script>
</body>
</html>
Output:
When the animation ends:
Animation Ended: fade-in-4
And an alert pops up that says “Fade-in animation completed!”.
The event listener for animationend captures the animation name, and upon the fade-in-4 animation completing, it triggers an alert message to the user.
Real-World Applications
The animationName property is an invaluable tool in many web development scenarios:
- Interactive UIs: Create dynamic user interfaces where different parts of the UI respond to specific animations.
- Complex Animations: Manage multiple animations on a single element with targeted JavaScript code for each.
- Game Development: Track and control animations in browser-based games.
- Web Applications: Manage animations in a web application in a detailed way and based on the name of the animation.
Browser Support
The animationName property is widely supported across all modern web browsers, ensuring compatibility and consistency for your web animation projects.
| Browser | Version |
|---|---|
| Chrome | Any |
| Edge | Any |
| Firefox | Any |
| Safari | Any |
| Opera | Any |
Conclusion
The animationName property of the JavaScript AnimationEvent interface is an essential part of animation management in web applications. By providing the name of the animation that triggered the event, it allows for dynamic control and targeted event handling of animations. This property empowers developers to create more robust and sophisticated web animation experiences. With the knowledge and examples provided in this guide, you’re well-equipped to enhance your web animation projects.
