click event problem

[yelewatchfaces]

I want to animate a circle

<svg class="background">

<circle id="demo" cx="0" cy="168" r="50" fill="white" />

<animate attributeName="x" begin="click" from="0" to="168" dur="1" />

</svg>

consider there are other elements too like time and hr

when i click the circle it animates, but it animates when i click other elemets too.

why is this happening?

My temporary solution was to label other elements with pointer-events hidden.

[kozm0naut]

What does your click event listener setup look like in js?

[yelewatchfaces]

nothing, i didn't add any in .js

[kozm0naut · Accepted solution]

You will want to use the click event listener and animation execution as detailed in https://dev.fitbit.com/build/guides/user-interface/javascript/

First, make sure to set the attribute pointer-events="visible" on your circle, "demo"

Then in js:

import * as document from "document";

let myCircle = document.getElementById("demo");

myCircle.addEventListener("click", (evt) => {
  myCircle.animate("click");
});

I don't know if "click" is some kind of predefined animation trigger (I wouldn't expect your animation to work at all without js) but you may want to set your animation's begin attribute to something like "enable" instead, in which case the click event listener would look like:

myCircle.addEventListener("click", (evt) => {
  myCircle.animate("enable");
});

[yelewatchfaces]

thanks it worked

[SunsetRunner]

You absolutely can animate in svg only:

 coordinate-animation 

Just make sure to close the animated element AFTER the animation like shown in the examples