Streaming live at 10am (PST)

How to use Vanta.js in Webflow? (Animated backgrounds)

Hello,

I have a quick question, it might be easy but I don’t find how it works. I want to use this code: https://www.vantajs.com/?effect=waves#(backgroundAlpha:1 in the hero section as a background. I tried to add but it seems I missed something.

Link: https://preview.webflow.com/preview/custom-code-bg?utm_source=custom-code-bg&preview=98e580b7736aed2d6a5fcc551f7d30f1

Can somebody tell me how to integrate this?

Very easy. Looks great so i also create codepen for me (For future uses).

wave example

code side

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

vanta.js more-options

webflow designer side

A

Add empty div (Or section)
image

B

Set the id to vantajs (The name her (any name) and the name from step-2 must match)

Related: webflow - setting-an-element-id

C

Last step. Your div from step A is empty. Add height for the div (600px for example)

Publish. Done :slight_smile:

full copy-paste code

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:

1 Like

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>

customize widget

Under plugin homepage play with the variables and than copy-pate the code (only change the #id)

codepen

https://codepen.io/ezra_siton/pen/dwLbdb

Very useful, it works now. Thank you for your time! :slight_smile:

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.

1 Like

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

It isn’t working :frowning: screen shot of my code

I think the birds one is not working. Everyone works apart from this one :frowning:

Hey, I just got the same problem and figured out that removing “#” before color number will fix it.

1 Like

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) https://www.vantajs.com/?effect=waves. 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!