JS code works on 7.0 but not for 7.1 - how can I make it work on 7.1?

Site URL: https://vincentgarreau.com/particles.js/#snow

Hello, the following code works for a cool snow effect in 7.0 but not 7.1. Does anyone know how to make it work for 7.1? I'm trying to have this on the first section of my home page. For reference, the code can be found here (click on "download current config (json)" to access the code file): https://vincentgarreau.com/particles.js/#snow 

And the walkthrough instructions can be found here: https://www.minimist.ca/articles/particlesjs-on-squarespace

It works on 7.0 but not on 7.1. What is needed to make it work on 7.1?

<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    particlesJS("home", particlesJSConfig);
    setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 100);
  });
</script>

<style>
  .particles-js-canvas-el {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
</style>
<script>
  var particlesJSConfig =
      
{
  "particles": {
    "number": {
      "value": 400,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#fff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 500,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "bottom",
      "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": "bubble"
      },
      "onclick": {
        "enable": true,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 0.5
        }
      },
      "bubble": {
        "distance": 400,
        "size": 4,
        "duration": 0.3,
        "opacity": 1,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

</script>

Kind regards,
John

6 hours ago, johnk10 said:

Site URL: https://vincentgarreau.com/particles.js/#snow

Hello, the following code works for a cool snow effect in 7.0 but not 7.1. Does anyone know how to make it work for 7.1? I'm trying to have this on the first section of my home page. For reference, the code can be found here (click on "download current config (json)" to access the code file): https://vincentgarreau.com/particles.js/#snow 

And the walkthrough instructions can be found here: https://www.minimist.ca/articles/particlesjs-on-squarespace

It works on 7.0 but not on 7.1. What is needed to make it work on 7.1?

<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    particlesJS("home", particlesJSConfig);
    setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 100);
  });
</script>

<style>
  .particles-js-canvas-el {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
</style>
<script>
  var particlesJSConfig =
      
{
  "particles": {
    "number": {
      "value": 400,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#fff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 500,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "bottom",
      "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": "bubble"
      },
      "onclick": {
        "enable": true,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 0.5
        }
      },
      "bubble": {
        "distance": 400,
        "size": 4,
        "duration": 0.3,
        "opacity": 1,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

</script>

Kind regards,
John

On this line you are targeting the #home section id, on 7.1 there is no such id name, kindly use this tool to identify your section id

particlesJS("home"

Chrome Web Store - Extensions (google.com)

Also what is the reference 7.0 and 7.1 page you are working on?

51 minutes ago, bangank36 said:

On this line you are targeting the #home section id, on 7.1 there is no such id name, kindly use this tool to identify your section id

particlesJS("home"

Chrome Web Store - Extensions (google.com)

Also what is the reference 7.0 and 7.1 page you are working on?

I tried it with the section id but it still did not work. The reference 7.0 was from a comment someone made on https://www.minimist.ca/articles/particlesjs-on-squarespace saying that it does not work on 7.1.

Is it possible? I tried with the change you suggested but it still didn't work.

1 hour ago, johnk10 said:

I tried it with the section id but it still did not work. The reference 7.0 was from a comment someone made on https://www.minimist.ca/articles/particlesjs-on-squarespace saying that it does not work on 7.1.

Is it possible? I tried with the change you suggested but it still didn't work.

You should share your site url so we can have a look better, enable site password if needed