Alternative strategy for not conflicting with previous animations...

[danielbodart]

I have come up with a simple alternative strategy that allows Sentinel to not conflict with previously defined animations: Just add a data attribute after the event fires and then make the animation use a negative attribute selector.

CSS

.some.selector.you.are.watching:not([data-sentinal-watched]) {
  animation: 0.0001s sentinal_watch;
}

Javascript

document.addEventListener('animationstart', ev => {
  if(ev.animationName === 'sentinal_watch') {
    ev.target.setAttribute('data-sentinal-watched', '');
  } 
});

Link to a CodePen example: https://codepen.io/danielbodart/pen/MWyxNQY

I don't think it's perfect as you will probably have a flicker as the JS will take time to run but maybe it's better?