Javascript Not Triggering Animations

[weinerda]

My index.gui:

  <defs>
    <symbol id="symPropeller">
      <g pointer-events="visible" transform="translate(50%,50%)">        
        <image x="$-20" y="$-20" width="40" height="40" href="propeller.png" load="sync" />
        <animateTransform attributeType="rotate" begin="enable" from="0" to="1080" begin="click" dur="2" easing="ease-in-out" final="restore" />  
      </g>
    </symbol>
  </defs>
  <use id="symPropellerInstance" href="#symPropeller" width="100%" height="100%" />
</svg>

My app/index.js:

  let symPropellerInstance = document.getElementById("symPropellerInstance"); 
  symPropellerInstance.animate("enable");

...and the animation doesn't happen.  I've even pasted in exactly what I've seen others say works for them, and I don't get any animations triggered by Javascript.

Also, if I add something like:

symPropellerInstance.groupTransform.scale.x = 100;

I get a null reference error.  I know the "use" is working because the image is displayed statically.

Can anyone help me?  Testing on actual Versa with iPhone X.

[weinerda · Accepted solution]

This is fixed.  I had both a begin="enable" and a begin="click" on the image.  Works fine now, although I'm really not sure why none of the other examples I tried worked for me.

[sagarsiddhpura]

I am facing same thing. Null reference error. How did you solve it?