Animation with Events not working

[joshmarinacci]

I've got a ring which should expand when it emits the 'tapped' event. Using _ref I'm saving a reference to the ring when another click event happens. In the handler I call

this.ring1.emit('tapped');

Is this the correct way to emit aframe events? Is there a better way to trigger animations? thx!

                 <Entity _ref={this.setRing1}
                         geometry={{primitive:'ring', radiusInner:0.5, radiusOuter:1.5}}
                         material={{color:'teal', opacity:1}}
                 >
                     <Entity animation={{
                         attribute:'radius-inner',
                         begin:'tapped',
                         dur:1000,
                         from:0.5,
                         to:9
                     }}/>
                     <Entity animation={{
                         attribute:'radius-outer',
                         begin:'tapped',
                         dur:1000,
                         from:1,
                         to:10
                     }}/>
                     <Entity animation={{
                         attribute:"material.opacity",
                         begin:'tapped',
                         dur:1000,
                         from:1,
                         to:0}}
                     />

                </Entity>

[ngokevin]

Bumping aframe-react to latest version might help, but I recommend not using refs for 3D or behavior-related logic. I'd register a component all do all the work inside there.

[joshmarinacci]

The ref is really just a way for me to get a hold of the ring and call 'emit'. A component would work the same way. I guess my question is really about the animation. Creating an animation entity inside of a ring works fine in standard Aframe but doesn't here. I'm guessing that something inside react is breaking the linkage between the outer element (the ring) and the inner elements (the animations). Have you experienced this before?

[ngokevin]

Try bumping aframe-react and use a component to see if it works.

[mocon]

I am also having this issue on the latest version of aframe-react (4.3.0 at this time).

[dkhan11]

Hi,

I also have the same problem. My animation are not working on iPad based environment. Just try running opening https://ngokevin.github.io/aframe-react-boilerplate/ from a Chrome/Safari running on an iPad and you will see the same results. Events are not propagated properly. I tried using the new camera property with aframe version 7.0 but it didn't help either.

Thanks for great work, D.