Join the Webstudio community

Updated 2 months ago

Vanta.js how to make it work?

At a glance

A community member is trying to use the Vanta.js library to create a background effect, but it's not working. Other community members suggest using HTML embedding and checking the CDN link. The community member shares the embed code, and another community member confirms it's working on their demo site. The issue is resolved when the community member turns on the "Client Only" flag in the HTML embed.

Useful resources
Hello! I'm trying to use https://www.vantajs.com/ for background but it's not working or appearing. Can someone help me pleaseu. Thank you πŸ™
c
J
r
10 comments
i think you need to use html embed, and use <script> with that js script.
I already did that, but it didn't work. 😦 also I took a look at the console nothing's there.
Hi. Are you using the CDN and can you double check the CDN link is working fine?
The code is working on my clients webflow website, but not on webstudio.
Can you share the embed code you are using?
yes. here's the code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js"></script>
<script>
VANTA.FOG({
el: "#smoke-effect",
mouseControls: true,
touchControls: true,
gyroControls: true,
minHeight: 200.00,
minWidth: 200.00,
highlightColor: 0x500000,
midtoneColor: 0x3c0000,
lowlightColor: 0xff0000,
baseColor: 0x0,
blurFactor: 0.50,
speed: 1.50,
zoom: 0.70
})
</script>
It seems to be working fine. I just created a demo link with your code - https://test-1tzw5.wstd.io/
Can you check the following:

1) In the div (box) you want this code, have you added the id - smoke-effect
2) Have you turned on the "Client Only" flag in the HTML Embed?
ohhhhhhhhhhhhh. So I need to turn on the "Client Only" flag. Now it's working! Wow! Thank you so much @rahul_nambiar91 !
Add a reply
Sign up and join the conversation on Discord
","dateCreated":"2024-09-17T07:47:12.325Z","dateModified":"2024-09-17T07:47:12.325Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/c7b42a07-ada0-4af7-a016-26063ee3bcdf","name":"Jeejay","identifier":"c7b42a07-ada0-4af7-a016-26063ee3bcdf","image":"https://cdn.discordapp.com/avatars/762999303689732127/55ae63eddda66f682cafa6844530039a.webp?size=256"},"commentCount":0,"comment":[],"position":6,"upvoteCount":0},{"@type":"Comment","text":"It seems to be working fine. I just created a demo link with your code - https://test-1tzw5.wstd.io/","dateCreated":"2024-09-17T08:47:11.496Z","dateModified":"2024-09-17T08:47:11.496Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/0a61bf4f-969f-48b2-b809-fbe22a332ea0","name":"rahul_nambiar91","identifier":"0a61bf4f-969f-48b2-b809-fbe22a332ea0","image":"https://cdn.discordapp.com/embed/avatars/5.png"},"commentCount":0,"comment":[],"position":7,"upvoteCount":0},{"@type":"Comment","text":"Can you check the following:1) In the div (box) you want this code, have you added the id - smoke-effect2) Have you turned on the \"Client Only\" flag in the HTML Embed?","dateCreated":"2024-09-17T08:48:29.732Z","dateModified":"2024-09-17T08:48:29.732Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/0a61bf4f-969f-48b2-b809-fbe22a332ea0","name":"rahul_nambiar91","identifier":"0a61bf4f-969f-48b2-b809-fbe22a332ea0","image":"https://cdn.discordapp.com/embed/avatars/5.png"},"commentCount":0,"comment":[],"position":8,"upvoteCount":0},{"@type":"Comment","text":"https://tenor.com/view/tears-of-joy-tears-happiness-kevin-hart-crying-gif-18835009","dateCreated":"2024-09-18T00:49:06.037Z","dateModified":"2024-09-18T00:49:06.037Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/c7b42a07-ada0-4af7-a016-26063ee3bcdf","name":"Jeejay","identifier":"c7b42a07-ada0-4af7-a016-26063ee3bcdf","image":"https://cdn.discordapp.com/avatars/762999303689732127/55ae63eddda66f682cafa6844530039a.webp?size=256"},"commentCount":0,"comment":[],"position":9,"upvoteCount":0},{"@type":"Comment","text":"ohhhhhhhhhhhhh. So I need to turn on the \"Client Only\" flag. Now it's working! Wow! Thank you so much @rahul_nambiar91 !","dateCreated":"2024-09-18T00:49:08.218Z","dateModified":"2024-09-18T00:49:08.218Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/c7b42a07-ada0-4af7-a016-26063ee3bcdf","name":"Jeejay","identifier":"c7b42a07-ada0-4af7-a016-26063ee3bcdf","image":"https://cdn.discordapp.com/avatars/762999303689732127/55ae63eddda66f682cafa6844530039a.webp?size=256"},"commentCount":0,"comment":[],"position":10,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/c7b42a07-ada0-4af7-a016-26063ee3bcdf","name":"Jeejay","identifier":"c7b42a07-ada0-4af7-a016-26063ee3bcdf","image":"https://cdn.discordapp.com/avatars/762999303689732127/55ae63eddda66f682cafa6844530039a.webp?size=256"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]