DEV Community

Cover image for tsParticles v1.15.0 released
Matteo Bruni for tsParticles

Posted on • Updated on

tsParticles v1.15.0 released

tsParticles v1.15.0

Release notes

New features

  • Interactivity grab mode now has a line color option
  • Particles and link lines have a warp option, Particles will maintain the same coordinates in out mode and lines will link beyond canvas borders
  • Particles color now has an animation section like the one on angle, opacity and size. It will animate the particles color.
  • Added click mode pause to play/pause animations when the click event occurs.
  • Added triangles options to links to fill the triangles between lines, color and opacity customizable
  • Added id propery to links to create links between particles with the same id
  • PolygonMask now has a new property data to work with, where you can specify a string with the SVG to use (well formatted, namespaces included) or an object with paths (array or single string, just the data, not the tag) and size

Changes

  • Renamed lineLinked in links in particles, interactivity.modes.connect and interactivity.modes.grab, it's still supported the old syntax
  • Container particles.addParticle now it's an easier method, it has two parameters: position ({ x: 0, y: 0 } for example) and overrideOptions (the same object specified in particles options). This method will add a new particle in that position if not undefined and with that options if not undefined
  • Fixed a bug with links color used in override options (emitters, custom particles, etc...)
  • Improved bubble mode interoperability with other modes
  • Star shape improved with new draw method and another additional option called inset to specify the inset length.

Some Pens of the new features

Simplified addParticle method


Links with triangles filled


Color animations


Warp out mode


Click play/pause mode


Preset repositories

Shape repositories


tsParticles plugins

tsParticles supports customizations 🥳.

YOU CAN CREATE YOUR OWN SHAPES OR PRESETS

Read more here...


Related projects

jQuery

If you want to use tsParticles with jQuery checkout this repository

VueJS

If you want to use tsParticles with VueJS checkout this repository

ReactJS

If you want to use tsParticles with ReactJS checkout this repository

3rd Party

A 3rd-party component is available too, read more here

Preact

If you want to use tsParticles with Preact checkout this repository

Angular CLI

If you want to use tsParticles with Angular CLI (actually v9) checkout this repository


Useful links

Checkout the demos here: https://particles.matteobruni.it

Do you want to replace the old, outdated and abandoned particles.js?

You're in the right place!


GitHub repo

https://github.com/matteobruni/tsparticles

npm

https://www.npmjs.com/package/tsparticles

yarn

https://yarnpkg.com/package/tsparticles

jsDelivr

https://www.jsdelivr.com/package/npm/tsparticles

CDNJS

https://cdnjs.com/libraries/tsparticles


Feel free to contribute to the project!


Demos

Here are some demos!

Custom Presets

watch the code for creating custom presets

Custom Shapes

watch the code for creating custom shapes

Characters as particles

FontAwesome characters as particles:


Mouse hover connections


Polygon mask


Background Mask particles


Polygon Mask with multiple paths

This polygon has 4 paths


Emitters

This login background is made with particles emitters, cool isn't it?


Absorbers

Have you ever wanted a black hole? Here's yours!


Collisions

The collisions in the previous releases, and in Particles.js too, were horrible. Now they're fixed and they look good. Finally!


Twinkle effect

Particles twinkling


Noise trails


Infection


Growing particles


COVID-19 SARS-CoV-2 particles

Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!

COVID-19 is not funny. It's a serious world problem and we should prevent its spreading. If you are in a risky area please STAY AT HOME

Top comments (0)