Animation Only Works On Initial Event, Breaks On Subsequent Events

Here’s my component

<a-entity class="player-button" id="back-button"
  geometry="primitive: plane; height: 1; width: 1"
  position="0 0 0"
  material="shader: flat; src: #back; transparent: true;"
  animation__enter="property: scale; easing: linear; dir: forward; dur: 100; to: 1.2 1.2 1.2; startEvents: mouseenter;"
  animation__leave="property: scale; easing: linear; dir: forward; dur: 100; to: 1 1 1; startEvents: mouseleave;">
</a-entity>

animation__enter happens once and then never happens on subsequent mouseenter events. What’s weird is that it does actually change the scale it just ceases to animate the change (pops into place).

Further more, after executing animation__enter, animation__leave never works. Once again, the values change on the event, but there’s no animation.

It’s very hard to see in this video http://recordit.co/qa9op6AeIc but what happens is that the initial enter animation works but then on mouseleave it breaks. Then I hover over the pause button and the same thing happens, enter works but all else fails from then on in – meaning each component gets one chance to animate. Very weird.

[wazynski]

I am having a similar issuse with these animations:

animation__fadeout={{
     property: 'material.color',
     dur: '1000',
     from: '#FFF',
     to: '#000',
     startEvents: 'set-image-fade-out',
}}

animation__fadein={{
     property: 'material.color',
     dur: '1000',
     from: '#000',
     to: '#FFF',
     startEvents: 'set-image-fade-in',
}}

The first time either of the startEvents are called the animation works perfectly. On subsequent calls the material colour changes but there is no tranisitions, like the duration has been set to 0.

[c4augustus]

Yes, I needed this fix as well, so I forked the original repo and merged the fix into my master. Thanks for it.