Animations events

[MrDeliK]

Hi i have trouble using animationend event.

When i trigger an animation using the animate function, the event is never triggered.

I tried using the addEventListener function or the animation property itself (in this case it was the onanimationend).

I use the display option because i'm using it as a modal.

const Element = document.getElementById('myElem');
Elemen.style.display = 'inline';
Element.addEventListener('animationend', (e) => {
  console.log('test');
});
Element.animate('enable')

<rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.6" id="myElem">
      <animate attributeName="opacity" begin="enable" from="0" to="1" dur="0.4" final="keep"/>
</rect>

#myElem {
  display: none;
  x:0;
  y:0;
  width:100%;
  height:100%;
}

What am i missing ?

[Gondwana]

Can you confirm that Elemen is actually Element? Is the element displayed, and do you see the animation?

[Gondwana]

This seems to be able to receive animation events. It's a bit bloated compared to your code, but you may be able to home in on the key difference. I tried briefly, but failed.

[MrDeliK]

Yes, as shown in the exemple it's a rect element.
The element is displayed, and the animation runs correctly, but the event is never triggered 😕

[MrDeliK]

I see that there is a system-events on the symbol, but i can't find any documentation on it.
If i set it on the rect element, i have this error 

App: Error 22 Load event was not sent due to missing type handler 'myElem' in ./resources/views/exercise/index.view

i try to set an event handler on the load event like this

Element.onload = () => {
  console.log('test');
}

but the error message is still there and no animation end triggered

[SunsetRunner]

If you only animate in index.view and want it to animate onload, you could set the animate begin="load".

Otherwise you really might need to set a flag, like in Gondwanas example. I personally never managed to detect if an animation is currently running in another way.

[Gondwana]

Yes, the system-events attribute is mysterious. I borrowed it from Fitbit's marquee component .view. It may only apply to <symbol>; not sure, I didn't fiddle with it for too long.

I did try to quickly convert your animation into a symbol with system-events, but the events still didn't happen.

If you run that ticker project, you'll see that events do come through. If you progressively migrate your code towards mine, or vice versa, there should come a point when the events start/stop working. That particular code change is the magic bullet.

[Gondwana · Accepted solution]

Radical theory:

<animate id='ani'...

[SunsetRunner]

You mean, the animation's state might get detected, when it has got an id,
even if you nowhere refer to it directly?

[Gondwana]

That's my wild guess. It's possible that id is used internally for event routing. No id, no event routing. Some other elements/components require ids to work properly.

[SunsetRunner]

Hmm... interesting. I actually had something similar today with an
eventListener in a totally different context (but also JS) and couldn't
understand why it worked without being referenced directly...

[MrDeliK]

You are right, system-events have no incidence on the behavior.
When i add an id, the event is triggered.
Thanks a lot @Gondwana 🙂

I have a question though, you said 

---

@Gondwana wrote:

Yes, the system-events attribute is mysterious. I borrowed it from Fitbit's marquee component .view. It may only apply to <symbol>; not sure, I didn't fiddle with it for too long.

---

How do you check the content of the existing components ?

[SunsetRunner]

Very intuitive, @Gondwana! 👏

[Gondwana]

---

@MrDeliK wrote:

How do you check the content of the existing components ?

---

Fitbit Sim files. Not much is available to us; mostly only .view, .gui and .css. Have a search for marquee_text_widget.gui. Sometimes there are clues about the internal SVG structure of components, and use of undocumented element attributes.