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 (#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

Author: kewalkishang

docs/components/animation.md

@@ -140,18 +140,19 @@ 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>
 ```
 
 [eventsglitch]: https://glitch.com/edit/#!/aframe-animation-events?path=index.html:1:0
 
 [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.