10-05-2021 19:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

10-05-2021 19:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.

Accepted Solutions
10-08-2021 10:37 - edited 10-08-2021 10:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
10-08-2021 10:37 - edited 10-08-2021 10:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


10-05-2021 20:21
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.
Gondwana Software

10-06-2021 12:44 - edited 10-08-2021 03:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
10-06-2021 12:44 - edited 10-08-2021 03:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

10-07-2021 19:56
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
10-08-2021 03:08 - edited 10-08-2021 03:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
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
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
10-08-2021 10:37 - edited 10-08-2021 10:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

10-08-2021 19:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
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) => { 😅
