10-19-2020 16:46
10-19-2020 16:46
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.
11-18-2020 09:25
11-18-2020 09:25
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.