Reverse Animation on second click

[RogueKnightwing]

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!

[Gondwana]

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.

[SunsetRunner]

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");

}

[RogueKnightwing]

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>

[SunsetRunner]

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?

[SunsetRunner · Accepted solution]

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))

[RogueKnightwing]

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) => { 😅