Tsparticles: Initialize particles after destroy

Created on 27 Feb 2020  路  4Comments  路  Source: matteobruni/tsparticles

Referencing issue https://github.com/VincentGarreau/particles.js/issues/405

I am aware of the way of destroying particles as described in #63
After destroying, it is not possible anymore to initialize and start particles because of the error TypeError: Cannot read property 'push' of null

Codesandbox example: https://codesandbox.io/s/quirky-black-yc3fg

How to reproduce:

1. click on start button to start the particles (everything is okay)

2. click on destroy button to destroy the particles (everything is okay)

3. click on start button to start the particles again (not working)

@dekadentno can you try your issue with this library? Does the bug still exist?

bug good first issue help wanted question up-for-grabs

Most helpful comment

Ok, I understood the issue. I'll fix it in the next release. Anyway you can skip the destroy, the load method has a issue in the old project, it was always adding a new particles instance instead of checking if the current target has an active instance.
The tsParticles.load already handles the destroy of the existing instance and creates a new one.
If you need the destruction like in the sample you sent after the destroy remove the item from the dom array. You can retrieve the dom array like this

const array = tsParticles.dom();

And then you can remove the destroyed instance from it.

All 4 comments

I can confirm it's not working with this library as well. But instead of that error, I've got this when trying to re-initialize particles:

Error in nextTick: "TypeError: this.retina is undefined"

Ok, can you share the code that gives you the error?

Ok, can you share the code that gives you the error?

Yeah, I made a quick fork for testing this: https://codesandbox.io/s/heuristic-elion-hvi7q

Ok, I understood the issue. I'll fix it in the next release. Anyway you can skip the destroy, the load method has a issue in the old project, it was always adding a new particles instance instead of checking if the current target has an active instance.
The tsParticles.load already handles the destroy of the existing instance and creates a new one.
If you need the destruction like in the sample you sent after the destroy remove the item from the dom array. You can retrieve the dom array like this

const array = tsParticles.dom();

And then you can remove the destroyed instance from it.

Was this page helpful?
0 / 5 - 0 ratings