The endEvent
event of the SVGAnimationElement
interface is fired when at the active end of the animation is reached.
Note: This event is not raised at the simple end of each animation repeat. This event may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was ended with a DOM method.
Bubbles | No |
Cancelable | No |
Interface | TimeEvent
|
Event handler property | onend
|
Examples
Animated circle
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
<title>SVG SMIL Animate with Path</title>
<circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1">
<animateMotion
path="M 0 0 H 300 Z"
dur="5s" repeatCount="indefinite" />
</circle>
</svg>
<hr>
<button>Stop animation</button>
<ul>
</ul>
ul {
height: 100px;
border: 1px solid #ddd;
overflow-y: scroll;
padding: 10px 30px;
}
let svgElem = document.querySelector('svg');
let animateElem = document.querySelector('animateMotion');
let list = document.querySelector('ul');
let btn = document.querySelector('button');
animateElem.addEventListener('beginEvent', () => {
let listItem = document.createElement('li');
listItem.textContent = 'beginEvent fired';
list.appendChild(listItem);
})
animateElem.addEventListener('endEvent', () => {
let listItem = document.createElement('li');
listItem.textContent = 'endEvent fired';
list.appendChild(listItem);
})
animateElem.addEventListener('repeatEvent', (e) => {
let listItem = document.createElement('li');
let msg = 'repeatEvent fired';
if(e.detail) {
msg += '; repeat number: ' + e.detail;
}
listItem.textContent = msg;
list.appendChild(listItem);
})
btn.addEventListener('click', () => {
btn.disabled = true;
animateElem.setAttribute('repeatCount', '1');
})
Event handler property equivalent
Note that you can also create an event listener for the end
event using the onend
event handler property:
animateElem.onend = () => {
console.log('endEvent fired');
}
Specifications
Specification | Status | Comment |
Scalable Vector Graphics (SVG) 2The definition of 'endEvent' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
endEvent event
|
Chrome
Full support Yes |
Edge
Full support 79 |
Firefox
Full support Yes |
IE
No support No |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
? |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
See also
- SVG animation with SMIL
beginEvent
repeatEvent
SVGAnimationElement: endEvent event by Mozilla Contributors is licensed under CC-BY-SA 2.5.