Trouble With Animations....

[There_Wolf]

Hello,

I'm developing a clock face and I'm trying to get an image to move offscreen to the left while a new one slides in from the right after one click.  Then on a second click, the second image leaves to the right while the original image slides back in from the left.  I've tried everything I can think of and then some and I can't get it to work properly.  I'm using variations of the following:

index.view:

<svg id="page" pointer-events="visible">
<defs>
<symbol id="first">
<g id="timeOut" transform="translate(0%,0%)" pointer-events="visible">
<image href="image1.png"/>

<animateTransform attributeType="translate" from="0%,0%" to="-200%,0%" begin="click" dur="3" />

<animateTransform attributeType="translate" from="-200%,0%" to="0%,0%" begin="enable" dur="3" />
</g>
</symbol>

<symbol id="second">
<g id="statsOut" transform="translate(300%,0%)" pointer-events="visible">
<image href="image2.png"/>

<animateTransform attributeType="translate" from="300%,0%" to="0%,0%" begin="enable" dur="3" />

<animateTransform attributeType="translate" from="0%,0%" to="300%,0%" begin="click" dur="3" />
</g>
</symbol>
</defs>

<section width="100%" height="100%">
<use id="firstImage" href="#first" width="100%" height="100%" />
</section>

<section width="100%" height="100%">
<use id="secondImage" href="#second" width="100%" height="100%" />
</section>
</svg>

index.js

let firstImage = document.getElementById("firstImage");
let secondImage = document.getElementById("secondImage");
let page = document.getElementById("page");

let clockIsVisible = true;

page.onclick = function toggleClock() {
if (clockIsVisible) {
firstImage.animate("click");
secondImage.animate("enable");
} else {
secondImage.animate("click");
firstImage.animate("enable");
}
clockIsVisible = !clockIsVisible;
}

Thanks in advance for any help that comes my way.

[JonFitbit]

It looks like you're trying to catch the click event on the very bottom element of the stack. (everything is drawn on top of that)

Instead, try putting a transparent element on the very top, and catch the event there.

<svg>
<!-- snipped for example -->
  <section width="100%" height="100%">
    <use id="firstImage" href="#first" width="100%" height="100%" />
  </section>

  <section width="100%" height="100%">
    <use id="secondImage" href="#second" width="100%" height="100%" />
  </section>

  <rect id="touch" class="touch-area" pointer-events="visible" />
</svg>

.touch-area { x: 0; y: 0; width: 100%; height: 100%; opacity: 0; }

const touch = document.getElementById("touch");
touch.addEventListener("click", (evt) => {
  console.log("touched");
  // start animations
});

Also, use enable/disable for the actual animation events.