I'm trying to trigger animations on other elements while a certain element is being looked at. So what I'm trying to achieve is: When I hover the ball, the text should fade in. And when I leave the ball, the text should fade out.
I was told this should be possible with the aframe-proxy-event-component but I couldn't find any example or documentation on how to use this.
The code looks something like that:
<script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-proxy-event-component/dist/aframe-proxy-event-component.min.js"></script>
<a-mixin id="scaleUpMixin" animation__scale="property: scale; dur: 500; easing: easeInOutQuad; to: 1.5 1.5 1.5;"></a-mixin>
<a-mixin id="scaleDownMixin" animation__scale2="property: scale; dur: 500; easing: easeInOutQuad; to: 1 1 1;"></a-mixin>
<a-mixin id="fadeInText" animation__opacity="property: text.opacity; dur: 500; to: 1"></a-mixin>
<a-mixin id="fadeOutText" animation__opacity2="property: text.opacity; dur: 500; to: 0"></a-mixin>
<a-entity rotation="0 -10 0">
<!-- Planet -->
<a-sphere color="yellow" position="0 1.8 -5" radius="0.5" scale="1 1 1"
mixin="scaleUpMixin scaleDownMixin"
animation__scale="startEvents: mouseenter;"
animation__scale2="startEvents: mouseleave;">
</a-sphere>
<!-- Text -->
<a-text id="TextMercury" class="textbox" text="value: Merkur; align: center; color:#FFF" opacity="0" scale="0.8 0.8 0.8"
position="0 1.8 -1"> </a-text>
</a-entity>
Here's a live demo: https://gorgeous-badge.glitch.me/
An the code: https://glitch.com/edit/#!/gorgeous-badge?path=index.html:30:61
Thanks!
