Hello,
I have a quick question, it might be easy but I don’t find how it works. I want to use this code: Vanta.js - Animated 3D Backgrounds For Your Website(backgroundAlpha:1 in the hero section as a background. I tried to add but it seems I missed something.
Link: Webflow - Custom Code BG
Can somebody tell me how to integrate this?
Very easy. Looks great so i also create codepen for me (For future uses).
https://www.vantajs.com/?effect=waves
Step 1 - add two javasciprt CDN assets before body (webflow custom code)
<!-- vanta js assets -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.21/vanta.birds.min.js"></script>
Related: What is a CDN? // HTML <script> src Attribute
Step 2 - Instilize the plugin by #id selector (Paste this block of code after the code from step 1).
<!-- Instilize vanta js by #id selector -->
<script>
VANTA.WAVES('#vantajs')
</script>
Related: #id Selector
Add empty div (Or section)
Set the id to vantajs (The name her (any name) and the name from step-2 must match)
Related: webflow - setting-an-element-id
Last step. Your div from step A is empty. Add height for the div (600px for example)
Publish. Done 
Before Body
<!-- #### VANTA JS PLUGIN ### -->
<!-- A. vanta js assets -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.21/vanta.birds.min.js"></script>
<!-- B. Instilize vanta js by #id selector -->
<script>
VANTA.WAVES('#vantajs')
</script>
Result:
live url:
importnat Each effect (birds/waves/clouds and so on) - use another vantajs file. The same idea - if you want the birds effect this is the “copy-paste” code:
<!-- #### VANTA JS PLUGIN ### -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.birds.min.js"></script>
<!-- B. Instilize vanta js by #id selector change WAVES to BIRDS -->
<script>
// Step 3 - Instilize the plugin by #id selector
VANTA.BIRDS({
el: "#vantajs",
colorMode: "lerpGradient",
wingSpan: 23.00,
speedLimit: 8.00,
separation: 60.00,
alignment: 35.00,
cohesion: 24.00,
backgroundAlpha: 0.36
})
</script>
Under plugin homepage play with the variables and than copy-pate the code (only change the #id)
Very useful, it works now. Thank you for your time!
Great. Please change the heading of your Q to
“How to use Vanta.js in Webflow? (Animated backgrounds)”
For future searches about “Animated backgrounds”. Vanta is Very cool library -
Reminds this library particles.js but easier to implement.
Thank you Sir! Much love and endless fortune for you! <3
Hi Siton,
Thanks for your great tutorial with this, I have followed and been able to get it working on my site.
However when I change the colors it no longer works.
Here is the colors I would like: GLOBE
This is how it shows in the custom code window
Any help would be greatly appreciated
Thanks
I think the birds one is not working. Everyone works apart from this one 
Hey, I just got the same problem and figured out that removing “#” before color number will fix it.
hi buddy, still not working, do you know where im going wrong please?
please share your read only link or screenshot of custom code window so I could try to help
Hello everyone.
I have problem with this effect in tablet version (if i see site with tablet) Vanta.js - Animated 3D Backgrounds For Your Website. I geting dark display. Mobile and desktop devices is good. Other effects is good in tablet device. Only this effect and only tablet device. How fixing this?
You should open issue on GitHub (bug report).
add screenshot and/or screen video record + deivce name + broswer name & version.
Thank you, this fixed my problem!
