Webstudio
Log in

Join the Webstudio community

Updated 4 weeks ago

Vanta.js how to make it work?

JJeejay
·
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
cchandra
i think you need to use html embed, and use <script> with that js script.
JJeejay
I already did that, but it didn't work. 😦 also I took a look at the console nothing's there.
rrahul_nambiar91
Hi. Are you using the CDN and can you double check the CDN link is working fine?
JJeejay
The code is working on my clients webflow website, but not on webstudio.
rrahul_nambiar91
Can you share the embed code you are using?
JJeejay
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>
rrahul_nambiar91
It seems to be working fine. I just created a demo link with your code - https://test-1tzw5.wstd.io/
rrahul_nambiar91
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?
JJeejay
https://tenor.com/view/tears-of-joy-tears-happiness-kevin-hart-crying-gif-18835009
JJeejay
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
","upvoteCount":0,"dateCreated":"2024-09-17T07:47:12.325Z","datePublished":"2024-09-17T07:47:12.325Z","dateModified":"2024-09-17T07:47:12.325Z","url":"https://help.webstudio.is/vantajs-how-to-make-it-work-FwyZ6rYFkhDz#11f3c08c-fc99-4ec4-a9d6-e911b9622e9e","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"}},{"@type":"Answer","text":"It seems to be working fine. I just created a demo link with your code - https://test-1tzw5.wstd.io/","upvoteCount":0,"dateCreated":"2024-09-17T08:47:11.496Z","datePublished":"2024-09-17T08:47:11.496Z","dateModified":"2024-09-17T08:47:11.496Z","url":"https://help.webstudio.is/vantajs-how-to-make-it-work-FwyZ6rYFkhDz#b794412f-2bfc-4c51-a77c-4f20c3051c60","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"}},{"@type":"Answer","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?","upvoteCount":0,"dateCreated":"2024-09-17T08:48:29.732Z","datePublished":"2024-09-17T08:48:29.732Z","dateModified":"2024-09-17T08:48:29.732Z","url":"https://help.webstudio.is/vantajs-how-to-make-it-work-FwyZ6rYFkhDz#a8075cce-3590-4d25-a532-86b5c9f83ed5","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"}},{"@type":"Answer","text":"https://tenor.com/view/tears-of-joy-tears-happiness-kevin-hart-crying-gif-18835009","upvoteCount":0,"dateCreated":"2024-09-18T00:49:06.037Z","datePublished":"2024-09-18T00:49:06.037Z","dateModified":"2024-09-18T00:49:06.037Z","url":"https://help.webstudio.is/vantajs-how-to-make-it-work-FwyZ6rYFkhDz#55af6c21-f866-41d7-91ed-6e5d2b5feedd","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"}},{"@type":"Answer","text":"ohhhhhhhhhhhhh. So I need to turn on the \"Client Only\" flag. Now it's working! Wow! Thank you so much @rahul_nambiar91 !","upvoteCount":0,"dateCreated":"2024-09-18T00:49:08.218Z","datePublished":"2024-09-18T00:49:08.218Z","dateModified":"2024-09-18T00:49:08.218Z","url":"https://help.webstudio.is/vantajs-how-to-make-it-work-FwyZ6rYFkhDz#38d0a275-e100-4a77-9fb3-fc13adea3514","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"}}]}}