Announcement: New version with support for custom event triggers and smaller payload size (653 bytes)

[amorey]

Hi Everyone,

I just wanted to let you know that there's a new release of SentinelJS that includes support for triggering watch functions from CSS using custom animation event names (v0.0.4):

<style>
  @keyframes slidein {
    from: {margin-left: 100%;}
    to: {margin-left: 0%;}
  }

  .my-div {
    animation-duration: 3s;
    animation-name: slide-in, node-inserted;
   }
</style>
<script>
  // trigger on "node-inserted" animation event name (using "!" prefix)
  sentinel.on('!node-inserted', function(el) {
    el.insertHTML = 'The sentinel is always watching.';
  });
</script>

This feature is useful when you want to trigger multiple animation events using the same CSS selector. Here's a demo of the new feature: https://jsfiddle.net/muicss/25nus53b/

Special thanks to @chris-morgan and @tnhu for help with decreasing the payload size and identifying the animation issue!

Andres

[petermonte]

hi @amorey,

Been struggling with this method for a while, so gonna leave this here for anyone.

It seems that Safari v14.0.2 (16610.3.7.1.9) doesn't trigger or randomly fails to trigger the animationstart event at page DOMContentLoaded.

I've created a CodePen example for you to check on all browser.

My solution is to create a var that will get changed to true once Sentinel runs. If it doesn't run then I wait for animationend and animationcancel to get triggered so that I can manually initialise Sentinel.

[amorey]

@petermonte Thanks for letting us know about the bug. Can you write/describe a test that will trigger this condition? If I could see code that triggers this condition then I could work on a bugfix. Also, let's create a new github issue to track it.