Example code for Animating on custom events (#4635)

[kewalkishang]

Description:
Need for example regarding the use of custom events to trigger animations in A-Frame. The current documentation does not explicitly show how to use the .emit() function to start animations based on custom events, which can be confusing for new users.

Changes proposed:

• Created a glitch example that demonstrates how to trigger animations using startEvents, pauseEvents, resumeEvents for custom events and then emitting them.
• Added a link to the glitch example in the animation doc.

[dmarcos]

Thanks. The example uses an old version of A-Frame (1.6.0). Also I don't see any animations being triggered. I might be missing something

[kewalkishang]

Hi @dmarcos, thanks for the review.
Updated A-Frame to the latest version (Had made the example a while back).
The animation is on the cube. It changes its color from Red to blue in 2.5 seconds now(It was 5 seconds before). The idea was to give users ample time to pause the animation in between and try the pauseEvents and resumeEvents as well.
Do let me know how I can make the example even better.

Best,
Kewal

[dmarcos]

Thanks for the patience. I'm reluctant to add more glitches to the examples because those need maintenance too and easily go out of date. Could we handle this by adding a couple of lines and pointing to the custom events section of the docs?

https://aframe.io/docs/1.6.0/introduction/javascript-events-dom-apis.html#emitting-an-event-with-emit

Thanks

[kewalkishang]

Hey @dmarcos.
I see. Makes sense.
Added a simple custom event in the existing example and a link to the custom events section for reference.
Changes
Do let me know if this is what you had in mind.

Thanks.

[dmarcos]

can we change the event name? startanim001 not super friendly. What about 'triggeranimation`?

[kewalkishang]

Sure thing! I initially named it "startanim001" because we had an emit event with the same name right below. I'll change both the event name and the emit to "triggeranimation" for consistency.

[dmarcos]

Thanks. One more comment

[dmarcos]

Thanks so much for sticking with it!