Disintegrate GitHub

"to reduce to particles, fragments, or parts; break up or destroy the cohesion of"

Contained demo - view source

Contained Disintegrated elements create particles when leaving their container. If a contained element specifies a particular container by using data-dis-container-id="example", that will be used. Otherwise Disintegrate will look in the element's ancestors for the nearest data-dis-container. If none is found, then the element's immediate parentNode will be used.

This example makes use of Disintegrate's built in contain effects paired with normal CSS animations.

Relevant code:

<div data-dis-container class="middle-container section-container">
    <button data-dis-type="contained" class="CSS-animation">
      I'm ran by a CSS animation!
    </button>
    <button data-dis-type="contained" class="CSS-animation second-animation">
      I'm ran by a CSS animation!
    </button>
</div>
.CSS-animation {
  animation: bounceOutDown 3s infinite;
}
@keyframes bounceOutDown {
  50% {
    opacity: 1; transform: translate3d(0, 0, 0);
  }

  60% {
    transform: translate3d(0, -20px, 0);
  }

  70% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.second-animation {
  animation-duration: 4.6s;
  animation-name: bounceOutRight;
}
@keyframes bounceOutRight {
  50% {
    opacity: 1; transform: translate3d(0, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

View more demos