[SOLVED] Animate troika-text (a-frame, 8thwall)

Animate troika-text (a-frame, 8thwall)

I have been trying to animate text opacity on an 8thwall a-frame project. I am using troika-text. I want the text to disappear after 'delay: 2500', but it does not.

<a-entity
  position="0 0 -5"
  troika-text-custom="color: white"
  troika-text-material="shader: standard; 
                        metalness: 0.7"
  animation="property: opacity; from:1; to:0; loop:false; delay: 2500; dur: 3000">
</a-entity>

Solution

Looks like troika-text has its own configurable binding for opacity called: fill-opacity, not opacity.

You can use it to modify the opacity of the text mesh:

<script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-troika-text/dist/aframe-troika-text.min.js"></script>
<a-scene>
  <a-entity position="0 1.5 -2" 
            troika-text="value: Hello world!; color: green"
            animation="property: troika-text.fillOpacity; from:1; to:0; delay: 350; loop:true; dir: alternate; dur: 1000">
  </a-entity>
    
  <a-troika-text position="0 1 -2"
                 value="Hello world!" 
                 fill-opacity="0.25"
                 color="blue"
                 animation="property: fill-opacity; from:1; to:0; loop:true; dir: alternate; dur: 1000">
  </a-troika-text>
</a-scene>