tsParticles stopped working after upgrading from 1.x to 2.x

Contact Details

No response

What happened?

Upgrading from tsparticles 1.43.1 to tsparticles-engine 2.0.5 isn’t working. Are there any migration notes? Also, links to examples in the documentation are broken.

Thanks for the amazing work on this project and for any help get it back up and running.

Version

2.0.5

Which library are you using?

Vanilla (tsparticles)

tsParticles Configuration

const defaultParticles: SingleOrMultiple<RecursivePartial<IOptions>> = {
    "particles": {
        "number": {
            "value": 200,
            "density": {
                "enable": true,
                "value_area": 1000
            }
        },
        "color": {
            "value": "#ffffff"
        },
        "shape": {
            "type": "image",
            "stroke": {
                "width": 3,
                "color": "#fff"
            },
            "polygon": {
                "nb_sides": 5
            },
            "image": {
                "src": SnowflakeImage,
                "width": 512,
                "height": 512
            }
        },
        "opacity": {
            "value": 0.5,
            "random": false,
            "anim": {
                "enable": false,
                "speed": 1,
                "opacity_min": 0.1,
                "sync": false
            }
        },
        "size": {
            "value": 5,
            "random": true,
            "anim": {
                "enable": false,
                "speed": 20,
                "size_min": 0.1,
                "sync": false
            }
        },
        "line_linked": {
            "enable": false,
            "distance": 50,
            "color": "#ffffff",
            "opacity": 0.5,
            "width": 1
        },
        "move": {
            "enable": true,
            "random": false,
            // speed: 5,
            "speed": {
                "min": 2,
                "max": 6
            },
            "direction": "bottom",
            "straight": false,
            "out_mode": "out",
            "bounce": false
        }
    },
    "interactivity": {
        "detectsOn": "window" /* this disables the pointer events on canvas */
    },
    "retina_detect": true
}

What browsers are you seeing the problem on?

Chrome

Relevant log output

no particles rendering. no error log.

Code of Conduct

• I agree to follow this project’s Code of Conduct

[steve-taylor]

If anyone came here from Google trying to upgrade react-tsparticles from v1 to v2, here’s what worked for me:

1. npm i react-tsparticles@latest tsparticles@latest
2. In the module that uses the Particles component:

   import {loadFull} from 'tsparticles';
   

3. Change

   <Particles options={options} />
   

   to

   <Particles options={options} init={loadFull} />
   

Coming from 1.36.0, I also had to add the following to my config:

fullScreen: {
    enable: false
}

[matteobruni]

The website is being updated soon with some video tutorials, and the documentation is fine for 2.0, closing this reminder