Particle Effects for Buttons

A little library that can be used for bursting particles effects. The idea is to disintegrate an element into particles and make it disappear (or vice versa).
particleeffects_featured

Today we’d like to share a little effect library with you that can be used to create bursting particle effects. The idea is to desintegrate an element into particles and making it disappear (and vice versa). This effect looks really interesting on buttons, so we’ve created a little collection that showcases a bunch of different styles for the effect.

The inspiration for this idea came from Cuberto’s Hyperloop interface shot, Route Selection UI.

The demo is kindly sponsored by Segment: One API, 200+ tools, no more integrations.
If you would like to sponsor one of our demos, find out more here.

The animations are powered by anime.js. Here’s an example of how you can use it:

<!-- Normal HTML element to disintegrate -->
  <button class="button">Button</button>
  
  <script src="anime.min.js"></script>
  <script src="dist/particles.min.js"></script>
  <script>
      // Initialize a new instance of Particles to disintegrate/integrate the button
      var particles = new Particles('.button');
  
      // Disintegrate the button into particles
      particles.disintegrate();
  
      // particles.integrate(); // would do the opposite
  </script>

The following options are available:

Name Type Default Description
canvasPadding Integer 150 Padding for the generated canvas that will be positioned right behind the target element. A canvasPadding = 0 will cause the canvas and the target element to have the same dimensions.
duration Integer 1000 Duration (ms) to perform the animations of target element and particles.
easing String or Function easeInOutCubic Easing function to perform the animation of target element. It will be passed directly to anime.js.
type String circle Type of particle. Could be any of the following values: circle, rectangle, triangle
style String fill Style of particle. Could be any of the following values: fill, stroke.
direction String left Direction to start disintegrating the element. Could be any of the following values: left, right top, bottom. The opposite direction will be used to perform the integrate operation.
size Float or Function Random from 1 to 4 Size (px) for particles.
speed Float or Function Random from -2 to 2 Pixels per frame that a particle will be moved. It could be a function to set it randomly per particle (as default value).
color String Target’s background-color Color used to fill the particles.
particlesAmount
Coefficient
Float 3 A coefficient to calculate the amount of particles to animate. A particlesAmountCoefficient = 0 will result in 0 particles, while bigger values will increase the amount of particles.
oscillation
Coefficient
Float 20 A coefficient to calculate the oscilation of particles while animating. A oscilationCoefficient = 0 will result in no oscilation (straight movements), while bigger values will increase the oscilation, resulting in
a kind of randomness.
begin Function undefined Execute a function at the beginning of the animation.
complete Function undefined Execute a function at the end of the animation.

We hope you enjoy this and find it useful!

References and Credits

Previous:
Next:

Tagged with:

Engineer in Computer Science and Freelance Front-End Developer. Available for Hire.

View all contributions by

Website: https://lmgonzalves.com/

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 10

  1. 5

    These look great but seem a little redundant as on click the new page will load before the animation can even finish?

  2. 7

    This seems like it would be perfect for indicating progress (e.g. disintegrate for upload, integrate for download, etc.)! Is there an easy way to pass progress to this? That would be beautiful.

  3. 8

    The headline layout doesn’t conform with the other demos, there is no back/previous button to go to the other demos?

  4. 10

    I liked your demo… its good… but need effort to implement if the button has already running on another js..

Follow this discussion

Leave a Comment