animation issue

Hey, i'd like a button that when pressed plays an animation on another element. What i have works however i can only play the animation once, when i press the button again it doesn't play. Why is this? Thanks in advance.

https://codepen.io/deerCabin/pen/qBzbqJK

Ἔ

ἔρως•7/17/24, 4:10 PM

before you start the animation, you have to reset it

snxxwyyOP•7/17/24, 4:15 PM

i set it to paused before running and it still doesn't work?

Ἔ

ἔρως•7/17/24, 4:16 PM

here's a quick way to reset an animation:
1- set to a name that doesnt exist
2- remove the class/attribute that has the animation
3- read the of the element
4- set to an empty string, for the element
5- re-add the class/attribute

Ἔ

ἔρως•7/17/24, 4:18 PM

you can try to skip step 2 and 5, and see if it still works, but i recommend it anyways

Ἔἔρως here's a quick way to reset an animation: 1- set `style.animation` to a name tha...

snxxwyyOP•7/17/24, 4:22 PM

that seems to be doing it, i updated the codepen, do you mean like that?

snxxwyyOP•7/17/24, 4:23 PM

i would have never expected that you'd have to read an offset height or set it to something that doesn't exist haha, could you please explain the benefits of that?

Ἔ

ἔρως•7/17/24, 4:24 PM

no beneficts

Ἔ

ἔρως•7/17/24, 4:24 PM

just forces a reflow on the browser

Ἔ

ἔρως•7/17/24, 4:24 PM

it's dumb stupid bs you need to do

Ἔ

ἔρως•7/17/24, 4:25 PM

basically, you're telling to the browser "yo, update this element"

Ἔ

ἔρως•7/17/24, 4:25 PM

browsers dont like doing unnecessary work, because that causes performance issues

Ἔ

ἔρως•7/17/24, 4:26 PM

imagine if it was still trying to calculate the final state of the animation, after it has finished and was just sitting idle

snxxwyyOP•7/17/24, 4:27 PM

oh okay i see, with offsetHeight, is that the only one it works with?

Ἔ

ἔρως•7/17/24, 4:27 PM

no, anything that forces a reflow works

Ἔ

ἔρως•7/17/24, 4:28 PM

but reading the and is the easiest

snxxwyyOP•7/17/24, 4:28 PM

oh, i'm a bit new to js, what's a browser reflow and what type of things force/cause it?

Ἔ

ἔρως•7/17/24, 4:38 PM

a reflow is when the browser has to re-calculate all the sizes and position of the element and all children

Ἔ

ἔρως•7/17/24, 4:39 PM

this is needed because the animation sticks the element to its final state

Ἔ

ἔρως•7/17/24, 4:39 PM

imagine thay you move it to the left by 150px

Ἔ

ἔρως•7/17/24, 4:40 PM

when it finishes animating, it stays at 150px away

Ἔ

ἔρως•7/17/24, 4:41 PM

when you change the play state, nothing happens because it already is at 150px - the final state

Ἔ

ἔρως•7/17/24, 4:42 PM

when you simply remove the animation, it doesnt do a reflow, which means that it will still stay in the final state, for performance reasons, as far as i understand

Ἔ

ἔρως•7/17/24, 4:42 PM

the reflow forces the element to recalculate what it didnt before, resetting it those 150px

Ἔ

ἔρως•7/17/24, 4:43 PM

it is possible that i missed a detail here and there, but dont worry much about it

Ἔ

ἔρως•7/17/24, 4:43 PM

reflows happen, but dont happen always

snxxwyyOP•7/17/24, 4:50 PM

Ohh that makes sense, that explains why it only played once, I appreciate the help

Ἔ

ἔρως•7/17/24, 4:51 PM

you're welcome