tsParticles v1.17.0 released
Tags: typescript, javascript, showdev, news
Published: 2020-07-14 10:32:00

# tsParticles 1.17.0

## Release Notes

### tsparticles

- Added `path` property to `particles.rotate` options to rotate the particle following its path, defaults to false
- Added `trail` mode for mouse interactivity (click and hover) to create a particle trail while moving or dragging the mouse
- Added `attract` click/hover mode to attract particles to mouse position
- Added `draggable` option to absorbers to make them draggable, defaults to false
- Fixed color un-sync animation start value
- Stroke color can now be animated like the (fill) color
- `setOnClickHandler` function has an additional parameter containing clicked particles

### react-tsparticles

- Added two `create-react-app` templates: `cra-template-particles` and `cra-template-particles-typescript`
- Renamed `params` to `options`, the old property is still supported

### preact-particles

- Renamed `params` to `options`, the old property is still supported

### particles.vue

- Changed version to 2.0.0 for breaking changes
- The component uses a single `options` attribute containing the particles config, like in all the other components
- The component now is initialised with `Vue.use` because it has a plugin now

### ng-particles

- Changed version to 2.0.0 for breaking changes
- The component now uses `<Particles />` tag instead of `<ng-particles />`

### svelte-particles

- Created `Svelte` component

---

## Some Pens of the new features

Black hole with orbiting particles

{% codepen https://codepen.io/matteobruni/pen/oNbWrmd %}

---

Particles direction-aware - Planes sample

{% codepen https://codepen.io/matteobruni/pen/gOPmxNW %}

---

Mouse moving Particles trail

{% codepen https://codepen.io/matteobruni/pen/abdpbBY %}

---

### Related projects

#### jQuery

If you want to use tsParticles with jQuery checkout [this repository](https://github.com/matteobruni/jquery-particles)

#### VueJS

If you want to use tsParticles with VueJS checkout [this repository](https://github.com/matteobruni/particles.vue)

#### ReactJS

If you want to use tsParticles with ReactJS checkout [this repository](https://github.com/matteobruni/react-tsparticles)

##### 3rd Party

A 3rd-party component is available too, read more [here](https://github.com/Wufe/react-particles-js)

#### Preact

If you want to use tsParticles with Preact checkout [this repository](https://github.com/matteobruni/preact-particles)

#### Angular CLI

If you want to use tsParticles with Angular CLI (actually v9) checkout [this repository](https://github.com/matteobruni/ng-particles)

---

## 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

{% codepen https://codepen.io/matteobruni/pen/ExjJmXX %}

*watch the code for creating custom presets*

### Custom Shapes

{% codepen https://codepen.io/matteobruni/pen/vYOMmGr %}

*watch the code for creating custom shapes*

### Characters as particles

{% codepen https://codepen.io/matteobruni/pen/xxGdyjd %}

#### FontAwesome characters as particles:

{% codepen https://codepen.io/matteobruni/pen/QWbrLoK %}

---

### Mouse hover connections

{% codepen https://codepen.io/matteobruni/pen/GRJMgBp %}

---

### Polygon mask

{% codepen https://codepen.io/matteobruni/pen/yLNpgKW %}

---

### Background Mask particles

{% codepen https://codepen.io/matteobruni/pen/WNvYKgW %}

---

### Polygon Mask with multiple paths

This polygon has 4 paths

{% codepen https://codepen.io/matteobruni/pen/MWaePMa %}

---

### Emitters

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

{% codepen https://codepen.io/matteobruni/pen/VwvPLMe %}

---

### Absorbers

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

{% codepen https://codepen.io/matteobruni/pen/eYpgxQx %}

---

### Collisions

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

{% codepen https://codepen.io/matteobruni/pen/YzyZzGZ %}

---

### Twinkle effect

Particles twinkling

{% codepen https://codepen.io/matteobruni/pen/jObBaqv %}

---

### Noise trails

{% codepen https://codepen.io/matteobruni/pen/vYNJPPL %}

---

### Infection

{% codepen https://codepen.io/matteobruni/pen/abvLoOB %}

---

### Growing particles

{% codepen https://codepen.io/matteobruni/pen/MWavNox %}

---

### Simplified `addParticle` method

{% codepen https://codepen.io/matteobruni/pen/GRpYdGv %}

---

### Links with triangles filled

{% codepen https://codepen.io/matteobruni/pen/WNQgXJZ %}

---

### Color animations

{% codepen https://codepen.io/matteobruni/pen/gOajEQW %}

---

### Warp out mode

{% codepen https://codepen.io/matteobruni/pen/vYNovQW %}

---

### Click play/pause mode

{% codepen https://codepen.io/matteobruni/pen/vYNovvW %}

---

### Euro flags with Divs interaction

{% codepen https://codepen.io/matteobruni/pen/MWKyJez %}

---

### External Noise Generator

{% codepen https://codepen.io/matteobruni/pen/MWKaRYy %}

---

### External Noise Generator with noise field drawn

{% codepen https://codepen.io/matteobruni/pen/rNxOPzQ %}

---

### COVID-19 SARS-CoV-2 particles

{% codepen https://codepen.io/matteobruni/pen/dyoZbMb %}

**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*