Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 2 years ago
Comments:26 (8 by maintainers)

Top GitHub Comments

3reactions

hamed-lohicommented, Jan 7, 2022

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/

2reactions

matteobrunicommented, Feb 2, 2022

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

Top Results From Across the Web

reactjs - tsparticles : Interruption in particle motion (defect in ...

I found the reason for this issue, there is a problem with the build tool or bundle file that occurs when using the...

Strict Mode

Strict mode checks are run in development mode only; they do not impact the production build. You can enable strict mode for any...

Particle detection in vacuum interrupter after current interruption

We propose an automated wavelet-based method of tracking particles in unreconstructed off-axis holograms to provide rough estimates of the presence of motion ......

Report - Investigation of the Challenger Accident

submitted the following. REPORT. I. INTRODUCTION. On January 28, at 11:39 a.m., the Space Shuttle Challenger and its crew suffered a tragic accident...

Chapter 17: Aeromedical Factors

Some important medical factors that a pilot should be aware of include hypoxia, hyperventilation, middle ear and sinus problems, spatial disorientation, motion.