VantaJS background code injection?

Hey, has anyone used VantaJS successfully with SquareSpace 7.1? 

I saw an old thread but the solution provided in it does not appear to work anymore. This is what I've got in Code Injection so far.

Just as a test I've also just changed the "el" property to something like "vanta" and then put in a Code Block with <div id="vanta"></div> just to see if the animation would display at all on the page, and that also gets me nothing. 

<script src="https://cdn.jsdelivr.net/npm/vanta/vendor/three.r95.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@0.5.17/dist/vanta.halo.min.js"
<script>
VANTA.NET({
  el: ".section-background", <----maybe I'm just targeting the div wrong? But I've tried a million things.
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
  color: 0xffffff,
  backgroundColor: 0x2bbbcf
})
</script>

On 5/8/2021 at 3:26 AM, ChristopherM said:

Hey, has anyone used VantaJS successfully with SquareSpace 7.1? 

I saw an old thread but the solution provided in it does not appear to work anymore. This is what I've got in Code Injection so far.

Just as a test I've also just changed the "el" property to something like "vanta" and then put in a Code Block with <div id="vanta"></div> just to see if the animation would display at all on the page, and that also gets me nothing. 

<script src="https://cdn.jsdelivr.net/npm/vanta/vendor/three.r95.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@0.5.17/dist/vanta.halo.min.js"
<script>
VANTA.NET({
  el: ".section-background", <----maybe I'm just targeting the div wrong? But I've tried a million things.
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
  color: 0xffffff,
  backgroundColor: 0x2bbbcf
})
</script>

 

There is also issue on their demo site as well, you should contact the developer

https://www.vantajs.com/

Sorry, what do you mean? I don't see any issue on their demo site.

To be clear, I also can't make any similar Javascript work in the background on Squarespace, even though I'm paying for the ability to have Javascript by upgrading to a Business account. I can't successfully use particles.js, either. 

1 minute ago, ChristopherM said:

Sorry, what do you mean? I don't see any issue on their demo site.

To be clear, I also can't make any similar Javascript work in the background on Squarespace, even though I'm paying for the ability to have Javascript by upgrading to a Business account. I can't successfully use particles.js, either. 

That strange, I just saw an error and now it gone, let me look your site again

Updated code

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.waves.min.js"></script>
<script>
VANTA.WAVES({
  el: ".section-background",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00
})
</script>

That's so strange, if I copy/paste this exactly, it still doesn't work for me. I'm supposed to put it in Code Injection in Advanced Settings, right? Is there something else I must do? 

Thank you for trying to help me! 🙂

1 hour ago, ChristopherM said:

That's so strange, if I copy/paste this exactly, it still doesn't work for me. I'm supposed to put it in Code Injection in Advanced Settings, right? Is there something else I must do? 

Thank you for trying to help me! 🙂

I placed in the code block, the screenshot if from my blog page

It worked! Thank you SO MUCH! I just needed to place it in the code block instead of code injection. So silly that it was so easy. Thank you!