Animate y translation of image from changeable start to end position

[tzaeb]

Hello together,

currently I want to move a image in y position depending on the daily goal statistics with the transformation animation.
The animateTransform element comes with the attribute "from" and "to" but is it possible to change these values in the javascript code?
Unfortunately the following translation animation guide with javascript translate the image or rect immediately without an animation:

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

The only possible solution which comes to my mind is to change the y position of the image incremental with the setInterval() function.

I hope you can help me and thanks for your support!

[JonFitbit · Accepted solution]

You can adjust the from/to in code.

<svg viewport-fill="lightblue">
  <defs>
    <symbol id="demo">
      <g id="demogroup">
        <animateTransform id="thing" attributeType="x" from="0" to="0" begin="enable" dur="3" final="keep" />
        <rect x="50%-50" y="50%-50" width="100" height="100" fill="red" />
      </g>
    </symbol>
  </defs>
  <svg width="100%" height="100%">
    <use id="demoinstance" href="#demo" width="100%" height="100%" />
  </svg>
</svg>

import document from "document";

const demoinstance = document.getElementById("demoinstance");
const demogroup = demoinstance.getElementById("demogroup");
const thing = demoinstance.getElementById("thing");

setTimeout(function() {
  thing.to = "200"
  demoinstance.animate("enable");
}, 2000);

[tzaeb]

Thanks a lot!

[ekurgan]

Hello Jon,

I tried to run the code as is and didn't manage to change the from/to, nothing changes.

Can you explain more deeply how to do it ?

[tzaeb]

Hello,

for more information see also following post:
https://community.fitbit.com/t5/SDK-Development/Dynamically-modify-attribute-of-lt-animate-gt-elemen...

Solution from francisco-g can be used in javascript without requestAnimationFrame.