wufe / react-particles-js

Particles.js for React
https://rpj.bembi.dev/
MIT License
1.15k stars 106 forks source link

OnHover repulse is not working #59

Closed c31216 closed 5 years ago

c31216 commented 5 years ago

All settings that I set is all working except the onHover repulse, there's nothing happening on the particles when I move my mouse around the canvas.

This is the settings I used

particles: { 
      number: {
        value: 80,
        density: {
            enable: true,
            value_area: 800
        }
      },
      color: {
        value: "#ffffff"
      },
      shape: {
        type: "circle",
        stroke: {
            width: 0,
            color: "#000000"
        },
        polygon: {
            nb_sides: 5
        }
      },
      opacity: {
        value: 0.5,
        random: false,
        anim: {
          enable: false,
          speed: 1,
          opacity_min: 0.1,
          sync: false
        }
      },
      size: {
        value: 3,
        random: true,
        anim: {
          enable: false,
          speed: 40,
          size_min: 0.1,
          sync: false
        }
      },
      line_linked: {
        enable: true,
        distance: 150,
        color: "#ffffff",
        opacity: 0.4,
        width: 1
      },
      move: {
        enable: true,
        speed: 3,
        direction: "none",
        random: false,
        straight: false,
        out_mode: "out",
        bounce: false,
        attract: {
            enable: false,
            rotateX: 600,
            rotateY: 1200
        }
      },
      interactivity: {
        detect_on: "canvas",
        events: {
            onhover: {
                enable: true,
                mode: "repulse"
            },
            onclick: {
                enable: true,
                mode: "push"
            },
            resize: true
        },
        modes: {
            grab: {
                distance: 400,
                line_linked: {
                    opacity: 1
                }
            },
            bubble: {
                distance: 400,
                size: 40,
                duration: 2,
                opacity: 8,
                speed: 3
            },
            repulse: {
                distance: 200,
                duration: 0.4
            },
            push: {
                particles_nb: 4
            },
            remove: {
                particles_nb: 2
            }
        }
    },
    retina_detect: true
}

I used https://vincentgarreau.com/particles.js to generate the settings.

wufe commented 5 years ago

Check out this comment on a previous issue. Something is maybe putting itself in front of the canvas.

rainstormza commented 5 years ago
 "onclick": {
        "enable": true,
        "mode": "push"
      },

image

Look like onclick event made lib error when change route. (navigate route from page that has particle component)

It used to work on version 2.3.0

fmturati commented 5 years ago

@rainstormza I got the same error here! Any ideas on how to solve the 'removeEventListener' problem?

wufe commented 5 years ago

Fixed in v2.4.2

fmturati commented 5 years ago

Thank you so much!!!!