aframe cursor animation not showing

Question

I've had to add the cursor dynamically.

const cursorMaterial = {
    color: darkViolet,
    shader: 'flat',
    opacity: 0.9,
  }
  const cursorAttributes={
    fuse: true,
    fuseTimeout: cursorFuseTimeout,
    objects: '.clickable',
  }

export const cursorFuseTimeout = 2000
export const cursorFuseScale =  '0.5 0.5 0.5'

export const cursorClickAnimation = {
  begin: 'click',
  easing: 'ease-in',
  attribute: 'scale',
  fill: 'backwards',
  from: '0.1 0.1 0.1',
  to: cursorFuseScale,
  dur: 150,
}

export const cursorFuseAnimation = {
  begin: 'cursor-fusing',
  easing: 'linear',
  attribute: 'scale',
  fill: 'backwards',
  from: cursorFuseScale,
  to: '0.1 0.1 0.1',
  dur: cursorFuseTimeout,
}

  const recticle = document.createElement('a-entity')
  recticle.setAttribute('position', '0 0 -1')
  recticle.setAttribute('geometry', "primitive: ring; radiusInner: 0.02; radiusOuter: 0.026;")
  recticle.setAttribute('material', cursorMaterial)
  recticle.setAttribute('cursor', cursorAttributes)

  const clickAnim = document.createElement('a-animation')
  Object.keys(cursorClickAnimation).map(key => clickAnim.setAttribute(key, cursorClickAnimation[key]))

  const fuseAnim = document.createElement('a-animation')
  Object.keys(cursorFuseAnimation).map(key => fuseAnim.setAttribute(key, cursorFuseAnimation[key]))

recticle.appendChild(recticleBackground)
  recticle.appendChild(clickAnim)
  recticle.appendChild(fuseAnim)
  this.camera.appendChild(recticle)

The cursor is working as expected, but the animations are no longer firing.

This is aframe 0.9.0

Is there a better way to add these to the element?

Answer 1

a-animation has been deprecated in 0.9.0. Use the animation component instead.