Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

VantaJS background code injection?


Question

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>

 

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 fa

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

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!

Posted Images

7 answers to this question

Recommended Posts

  • 0
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/

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

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. 

Link to post
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

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>

image.thumb.png.a6f5dfd86f9a93d1e06d001232e83e43.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

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! 🙂

Link to post
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...