CODEWITHSUNDEEP
javascriptaframewebvr
Nathan Diesel
Nathan Diesel

Reputation: 91

How to reset opacity animation for A-Frame cursor

I'm having trouble resetting the opacity of the cursor after I animate its opacity from 1 to 0. I combined 2 animation attributes: material.opacity and scale. The scale attribute will reset the size after the animation but material.opacity will not. Essentially, the cursor disappears until the click event is activated again.

<a-entity camera look-controls>
<a-entity cursor="fuse: false;" position="0 0 -1" scale="0.01 0.01 0.01" geometry="primitive: ring" material="color: #fff; shader: flat">
<a-animation begin="click" attribute="material.opacity" fill="none" from="1" to="0"></a-animation>
<a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.01 0.01 0.01" to="0.1 0.1 0.1"></a-animation>
</a-entity>
</a-entity>

The A-Frame documentation indicates that the fill attribute of none will "reset the value to the initial value" after the animation finishes but this is not happening.

I'm testing on Chrome for Android 6.0.1 using a Samsung Galaxy 7 and Safari for iOS 9.3.2 using an iPhone 6+.

Upvotes: 1

Views: 733

Answers (1)

ngokevin
ngokevin

Reputation: 13233

Documentation may be off. Try setting fill="backwards".

Alternatively, create two animations, one for mouseup and one for mousedown.

Upvotes: 1

Related Questions