Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
amorey opened this issue Sep 24, 2017 · 2 comments

Comments

@amorey
Copy link
Member

amorey commented Sep 24, 2017

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

@amorey amorey changed the title Announcement: New version with support for custom event triggers and smaller size (602 bytes) Announcement: New version with support for custom event triggers and smaller payload size (602 bytes) Sep 24, 2017
@amorey amorey changed the title Announcement: New version with support for custom event triggers and smaller payload size (602 bytes) Announcement: New version with support for custom event triggers and smaller payload size (653 bytes) Sep 24, 2017
@petermonte
Copy link

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
Copy link
Member Author

amorey commented Feb 2, 2021

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants