Disintegrate

Trigger demo - view source

Since non-simultaneous Disintegrate objects create particles based on bounds, in order to trigger a particle effect on another element we just have to move that element the way that we want to when the trigger event happens. In this case, a click effect is used to trigger the animation in our button.

Relevant code:

<div class="middle-container section-container">
  <button data-dis-type="self-contained" data-dis-id="myDisId">
    I'm a button
  </button>
  <button data-dis-trigger-for="myDisId">
    Explode the button
  </button>
</div>

disintegrate.init();

if(document.querySelectorAll("[data-dis-trigger-for]")) {
  // If you do anything with dises, you need to wait for them to 
  // all finish loading
  window.addEventListener("disesLoaded", function() {
    // Iterate through all elements with 'dis-trigger-for' attribute
    document.querySelectorAll("[data-dis-trigger-for]").forEach(function(triggerEl) {

      // Get the matching Disintegrate element
      var el = document.querySelector("[data-dis-id = '" + triggerEl.dataset.disTriggerFor + "']");
      if(el) {
        // Get the relevant Disintegrate object
        var disObj = disintegrate.getDisObj(el);

        // Apply our trigger
        triggerEl.addEventListener("click", function(e) {
          disObj.container.classList.add("animate");
        });

        // Reset the animation (for demo purposes)
        disObj.elem.addEventListener("disComplete", function(e) {
          disObj.container.classList.remove("animate");

          // Hack to reset the CSS animations
          // see https://stackoverflow.com/a/6303311/2065702 for more info
          resetCSSAnimation(disObj.container);
          resetCSSAnimation(disObj.elem);
        });

        function resetCSSAnimation(elem) {
          elem.style.animation = "none";
          setTimeout(function() {
              elem.style.animation = "";
          }, 10);
        }
      }
    });
  });
}

View more demos