From 5e1d631b652f2396340a1711c580c85655059402 Mon Sep 17 00:00:00 2001 From: Kewal Kishan Gokuldas <kewalkishang@gmail.com> Date: Wed, 20 Nov 2024 08:05:01 -0800 Subject: [PATCH] Example code for Animating on custom events (#4635) (#5552) * Added a link to a glitch example in the animation doc for animating using custom events (aframevr#4635) * Removed the link to the custom event glitch examples, Added a custom event in the existing example and link to emitting custom events. * kept only startEvents in example and redirect link fix * animation and emit eventname changes --- docs/components/animation.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/components/animation.md b/docs/components/animation.md index a11048fe9d2..e42ca8dfc92 100644 --- a/docs/components/animation.md +++ b/docs/components/animation.md @@ -140,7 +140,8 @@ We can use the `startEvents` property to animate upon events: geometry="primitive: box" material="color: red" animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500"; - animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500";> + animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500"; + animation__customevent="property: components.material.material.color; type: color; from: red; to: blue; startEvents: triggeranimation; dur: 500";> </a-entity> ``` @@ -148,10 +149,10 @@ We can use the `startEvents` property to animate upon events: [Remix the Animating on Events Glitch][eventsglitch]. -To start an animation by explicitly emitting an event, you can do the following: +To start an animation by explicitly [emitting a custom event](https://aframe.io/docs/1.6.0/introduction/javascript-events-dom-apis.html#emitting-an-event-with-emit), you can do the following: ``` -el.emit(`startanim001`, null, false); +el.emit(`triggeranimation`, null, false); ``` The [third parameter of emit](https://aframe.io/docs/1.6.0/core/entity.html#emit-name-detail-bubbles) set to "false" parameter ensures the event won't bubble up to parents, so that you can target the animation at just one particular element.