04-09-2018 04:05
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-09-2018 04:05
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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?
Answered! Go to the Best Answer.

Accepted Solutions
04-12-2018 07:08
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-12-2018 07:08
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.

04-10-2018 11:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


04-10-2018 11:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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/

04-11-2018 03:44 - edited 04-11-2018 03:46
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-11-2018 03:44 - edited 04-11-2018 03:46
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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");
}

04-12-2018 07:08
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-12-2018 07:08
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.

04-12-2018 13:03
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


04-12-2018 13:03
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Thanks Allan, sorry I hadn't had chance to experiment yet. Glad you sorted it.
