tsparticles: [Bug]: Interruption in particle motion (defect in movement) after build in react

Contact Details

lohi.hamed@gmail.com

What happened?

everything works fine when I use npm run start, but after build (npm run build) there is Interruption in particle motion.

my react version is 17.0.2 and use typescript.

Version

1.38.0

Which library are you using?

React.js (react-tsparticles, react-particles-js)

tsParticles Configuration

const options: ISourceOptions = 
  {
    retina_detect: false,
    detectRetina: false,
    "background": {
      "color": {
        "value": "#00000095"
      },
      "position": "50% 50%",
      "repeat": "no-repeat",
      "size": "cover",
      "opacity": 1,
      "image": "url('/img/bg1.jpg')"
    },

    "backgroundMask": {
      "composite": "destination-out",
      "cover": {
        "color": {
          "value": {
            "r": 255,
            "g": 255,
            "b": 255
          }
        },
        "opacity": 1
      },
      "enable": true
    },

    "fullScreen": {
      "enable": false,
      "zIndex": -10
    },
    "interactivity": {
      "events": {
        "onClick": {
          "enable": true,
          "mode": "push"
        },
        "onDiv": {
          "selectors": "#repulse-div",
          "mode": "repulse"
        },
        "onHover": {
          "enable": true,
          "mode": "bubble",
          "parallax": {
            "force": 60
          }
        }
      },
      "modes": {
        "bubble": {
          "distance": 400,
          "duration": 2,
          "opacity": 0.8,
          "size": 40
        },
        "grab": {
          "distance": 400
        },
        "slow": {
          "factor": 1,
          "radius": 0
        }
      }
    },
    "particles": {
      "color": {
        "value": "#ffffff"
      },
      "links": {
        "color": {
          "value": "#ffffff"
        },
        "distance": 150,
        "enable": true,
        "opacity": 0.4,
        "shadow": {
          "color": {
            "value": "lime"
          }
        }
      },
      "move": {
        "attract": {
          "rotate": {
            "x": 600,
            "y": 1200
          }
        },
        "enable": true,
        "outModes": {
          "bottom": "out",
          "left": "out",
          "right": "out",
          "top": "out",
          "default": "none"
        },
        "direction": "right",
        "speed": 2
      },
      "number": {
        "density": {
          "enable": true,
        },
        "value": 60
      },
      "opacity": {
        "value": {
          "min": 0.1,
          "max": 0.5
        },
        "animation": {
          "enable": true,
          "speed": 1,
          "minimumValue": 0.1
        }
      },
      "shape": {
        "options": {
          "polygon": {
            "sides": 5
          },
          "star": {
            "sides": 5
          },
        },
        "type": "square"
      },

      "size": {
        "random": {
          "enable": true,
          "minimumValue": 0,
        },
        "value": {
          "min": 5,
          "max": 20
        },
        "animation": {
          "speed": 10,
          "minimumValue": 0.1
        }
      },
    }
  };


<Particles
          id="tsparticles"
          init={particlesInit}
          loaded={particlesLoaded}
          options={options} />

What browsers are you seeing the problem on?

In most browsers

Relevant log output

No response

Code of Conduct

I agree to follow this project’s Code of Conduct

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 26

Commits related to this issue

fix: solved performance drop issue after refresh, closes #2809, #2815, #2936 — committed to tsparticles/tsparticles by matteobruni 2 years ago

Most upvoted comments

I found the reason for this issue, there is a problem with the bundle file that occurs when using the npm run build command. now I am building the project with Webpack and there is no interruption https://n.basimdata.ir/

hamed-lohi on Jan 7, 2022

1.39.3 should fix this issue, the update is going to be available very soon

matteobruni on Feb 2, 2022

Being more direct, i changed my browserslist to this and i already noticed a huge difference

"browserslist": {
                "production": [
                        "> 5%",
                        "not dead",
                        "not op_mini all"
                ],
                "development": [
                        "> 5%",
                        "not dead",
                        "not op_mini all"
                ]
        },

brenoprata10 on Feb 2, 2022

If use webpack for build, this problem almost solved . following in stackoverflow Do you want webpack configs ?

Thanks for your reply. I solved by changing the browserlist in package.json. It seems to be an issue with webgl API + the build tool, I don’t know

mutheusalmeida on Jan 18, 2022

This is a really useful and complete tool. Congratulations to you. thank you

hamed-lohi on Jan 7, 2022