---
title: Events Research
author: Prince Mukhtar
published: "2024/16/4"
---
## Code Sample
In this code, we have a simple HTML page with a red square element that has an animation applied to it. The animation scales the element and changes its background color. Inside the event listener functions, you can perform any desired actions or apply styles based on the specific event. When you run this code in a browser and open the console, you'll see messages logged for each event occurrence. You can customize the actions or styles inside the event listeners to fit your needs.
```html
```
# Animation Events
Animationstart - an event thats triggered, when an animation begins playing. It's a fun way to create special functions or effects, and it can perform any desired actions or apply styles within that function.
```js
const element = document.querySelector('.my-element');
element.addEventListener('animationstart', () => {
console.log('Animation started!');
// Add your desired actions or styles here
});
```
* Animationend - an event thats triggered, when an animation has completed. Also its allows the user to add extra functionality and interactivity to the amimation. For example you can trigger specfic actions or apply additional styles at different stages of the animation. Which allows the user to create more dynamic and engaging animations. When the animation ends, the event listener function is executed, and you can perform actions or styles accordingly.
```js
element.addEventListener('animationend', () => {
console.log('Animation ended!');
// Add your desired actions or styles here
});
```
* Animationiteration - an event thats triggered, when an animation loops back to it's starting point. This allows the user to add specific functionality or effect that occur each time an animation loops back. great way for creating continuous animations or applying changes to elements as they repeat by adding dynamic behavior and interactivity to the animation. When the animation iterates, the event listener function is called, and you can define actions or styles to be executed at each iteration.
```js
element.addEventListener('animationiteration', () => {
console.log('Animation iteration!');
// Add your desired actions or styles here
});
```
By combining these three events, you can have more control over the lifecycle of animations.
### Cite Sorces
1. https://www.w3schools.com/HTML/html5_draganddrop.asp
1. https://medium.com/front-end-weekly/css-animation-events-in-javascript-d2bfe702636d
1. https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event