Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Animation] `animationcomplete` event only fires upon first completion

See original GitHub issue

When an animation completes, the animationcomplete event only fires upon the first completion, and does not fire for any subsequent completions of the same animation.

The animationbegin event fires as expected, but animationcomplete does not.

I’m experiencing this issue in A-Frame 0.7.* as well as 0.8.0 with aframe-animation-component 4.*.* in Firefox, Chrome, Edge on Windows 10 (all I’ve tested).

Demo: https://codepen.io/dansinni/pen/jzBxKa

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:9 (6 by maintainers)

Top GitHub Comments

1reaction

ngokevincommented, Aug 13, 2018

Now fixed with startEvents since that restarts and creates new animation each time (and presumably in that case you are triggering the animation start so you can tell already when you are restarting it).

loop: true I guess will never complete, and it should fire if it’s set to an integer.

0reactions

janpiocommented, Feb 4, 2019

Yep, seems to work as expected for animation now, but not animation-timeline. I created #216 for this.

Top Results From Across the Web

Why is aframe animation complete event firing multiple times

Move the code below outside of the click handler so it runs only once per animationcomplete__fadein event. $(loading_sky).on("animationcomplete ...

Phaser 3 API Documentation - Namespace: Events

The Animation Complete Event. This event is dispatched by a Sprite when an animation playing on it completes playback. This happens when the...

Element: animationend event - Web APIs | MDN

The animationend event is fired when a CSS Animation has completed. If the animation aborts before reaching completion, such as if the ...

animationend Event - W3Schools

Definition and Usage. The animationend event occurs when a CSS animation has completed. For more information about CSS Animations, see our tutorial on...

Detect when a CSS animation has finished in JavaScript

... going to take a look at the " animationend " event in JavaScript which allows you to detect when a CSS animation...