Animation problems

[allan175]

I am trying to get an image to animate from Javascript. In my index.gui I have the following:-

  <image id="currentCard" x="19%" y="16%" width="114" height="166" href="2C.png">
    <animateTransform attributeType="scale" from="1,1" to="0,1" begin="mousedown" dur="1.0" />
    <animateTransform attributeType="scale" from="0,1" to="1,1" begin="mousedown+0.5"dur="1.0" />
  </image>

And in my index.js I have:-

let button = document.getElementById("button");
button.onactivate = function(evt) {
  currentCard.animate("mousedown");
  console.log("Click");
}

I get the message "Click" ok, but the animation never triggers. What have I done wrong?

[JonFitbit]

Take a look at this from the animations guide:

Triggering Animations

JavaScript can trigger the animations on the <use> of a template symbol. So, in order to trigger an animation from JavaScript, we must first create a Template Symbol containing the <animate> or <animateTransform>elements, then create a <use> instance of it.

https://dev.fitbit.com/build/guides/user-interface/animations/

[allan175]

I was initially trying "use" in the way it says on the Triggering Animations page before cutting it down to what I posted above (obviously I cut a bit too much!).

So now I've changed it to this, and I'm still having no luck.

  <defs>
    <symbol id="current">
      <image id="currentImage" x="19%" y="16%" width="114" height="166" href="2C.png">
        <animateTransform attributeType="scale" from="1,1" to="0,1" begin="mousedown" dur="1.0" />
        <animateTransform attributeType="scale" from="0,1" to="1,1" begin="mousedown+0.5"dur="1.0" />
      </image>
    </symbol>
  </defs>
  
  <use id="currentUse" href="#current"/>

And the Javascript.

var currentUse = document.getElementById("currentUse");

let button = document.getElementById("button");
button.onactivate = function(evt) {
  currentUse.animate("mousedown");
}

[allan175 · Accepted solution]

Answering my own question after a bit more fiddling about.

My SVG is now like this

<defs>
  <symbol id="current">
    <g id="currentG">
      <image id="currentImage" x="-19%" y="-16%" width="114" height="166" href="back.png"/>
      <animateTransform attributeType="scale" from="1,1" to="0,1" begin="enable" dur="0.5" />
      <animateTransform attributeType="scale" from="0,1" to="1,1" begin="enable+0.5"dur="0.50" />
    </g>
  </symbol>
</defs>
...
<use id="currentUse" x="38%" y="32%" href="#current"/>

And the Javascript

var current = document.getElementById("currentUse");

current.animate("enable");

Animates fine now.

My problem seemed to be that I'd put the animation tags inside the Image tag. Now the animation is contained at the same level as the image it seems right.

[JonFitbit]

Thanks Allan, sorry I hadn't had chance to experiment yet. Glad you sorted it.