Break Elements Into Particles – Disintegrate.js

Category: Animation , Javascript | April 20, 2020
Author: ZachSaucier
Views Total: 1,425 views
Official Page: Go to website
Last Update: April 20, 2020
License: MIT


Break Elements Into Particles – Disintegrate.js


Disintegrate.js is a fancy JavaScript library to simulate the destruction and explosion effects that break any DOM element into canvas based particles, fragments, or parts.

How to use it:

Install & download.

$ npm install disintegrate --save

Load the necessary html2canvas.js and Disintegrate.js libraries in the document.

<script src="/path/to/html2canvas.min.js"></script>
<script src="/path/to/disintegrate.js"></script>

Create the element on which you want to apply the destruction and explosion effects. All possible data attributes:

  • data-dis-container: parent container
  • data-dis-id: container ID
  • data-dis-type: container type: “contained”, “self-contained” or “simultaneous”
  • data-dis-particle-type: particle type to use
  • data-dis-reduction-factor: reduces the number of particles
  • data-dis-color: color of particles
  • data-dis-ignore-colors: colors to ignore
  • data-dis-id: element ID
  • data-dis-container-id: container ID
<div data-dis-container>
  <div data-dis-type="contained">
    Target element

Initialize the Disintegrate.js library.


API methods.

// An array of all Disintegrate objects.

// Intiates the simultaneous particle creation for the given Disintegrate object.

// Gets the Disintegrate object for a given element.

// Adds custom particle types.

Remove disintegrate object from the stored data and removes the relevant canvas from the page.

disObj.elem.addEventListener("disComplete", () => disObj.kill() );



  • Added .kill() support

v1.0.1 (09/16/2018)

  • Added support for multiple init calls

You Might Be Interested In:

Leave a Reply