10-05-2021 19:13
10-05-2021 19:13
I feel like I'm making this much harder than it should be:
I have an animation where an image and all the text slides to one side of the screen when the screen is clicked. I am trying to then make everything slide back when the screen is clicked again. How Do I connect the reverse animation to a second click?
I currently have it set up with an invisible click rect, like this:
document.getElementById("clickSpot").onclick = function(e) {
console.log("click");
coffinLid.animate("enable");
}
Thank you in advance!
Answered! Go to the Best Answer.
10-08-2021 10:37 - edited 10-08-2021 10:44
10-08-2021 10:37 - edited 10-08-2021 10:44
I just tested your code (with a rect instead your img) and for me it's working fine 🙂
(and with the animations inside the element you don't need the outer <g>)
When you got it running, I'd perhaps add a check, so the both animations don't interfere if clicked before one ended.
(you could check for x eg, or set a flag like (animated === true))
10-05-2021 20:21
10-05-2021 20:21
I'd probably define a second animation that goes back the other way, and trigger it using a different event name (ie, not "enable"). Then your onclick needs to alternate between "enable" and the new event name.
There may be better ways. I'm lousy at animation.
10-06-2021 12:44 - edited 10-08-2021 03:00
10-06-2021 12:44 - edited 10-08-2021 03:00
I would probably use a counter to enable one of your two animations (using id of the single animations, not the <g>):
edit: let counter = 0;
document.getElementById("clickSpot").onclick = function(e) {
let counter = 0;
counter++
if(counter % 2 = 1){
console.log("click1");
coffinLid1.animate("enable");
}else{
console.log("click2")
coffinLid2.animate("enable");
}
10-07-2021 19:56
10-07-2021 19:56
This got me much closer, I changed it just slightly to:
var counter = 0;
document.getElementById("clickSpot").onclick = function(e) {
counter++
if(counter%2==1){
console.log("click1");
coffinLid1.animate("enable");
}else{
console.log("click2");
coffinLid2.animate("enable");
}}
now the second animation works but only if you double tap/click, I can't seem to figure out how to get it to work on just the single second click. Does it have to do with how my animation is set up?
<g id="coffinLid">
<image x="50%" y="-1%" width="100%" height="100%" href="just lid.png" fill="black" pointer-events="visible">
<animate id="coffinLid1" attributeName="x" begin="enable" from="50%" to="0%" dur="2" />
<animate id="coffinLid2" attributeName="x" begin="enable" from="0%" to="50%" dur="2" />
</image>
</g>
10-08-2021 03:08 - edited 10-08-2021 03:13
10-08-2021 03:08 - edited 10-08-2021 03:13
ooooh... sorry for placing the initialization of the counter wrong 🙃
hmmm... did you log "counter%2" ?
A wild guess:
set end="disable" to both anims and disable a1 when enabling a2 and vice versa?
10-08-2021 10:37 - edited 10-08-2021 10:44
10-08-2021 10:37 - edited 10-08-2021 10:44
I just tested your code (with a rect instead your img) and for me it's working fine 🙂
(and with the animations inside the element you don't need the outer <g>)
When you got it running, I'd perhaps add a check, so the both animations don't interfere if clicked before one ended.
(you could check for x eg, or set a flag like (animated === true))
10-08-2021 19:18
10-08-2021 19:18
Thank you so much, you're a life saver! I tested it with a rect after you said it worked and realized I put the code after the clock.ontick = (evt) => { 😅