Streaming live at 10am (PST)

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

#1

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?

0 Likes

#2

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

wave example

code side

Step 1 - add two JS assets before body (webflow custom code)

<!-- vanta js assets -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.waves.min.js"></script>

Related: What is a CDN? // HTML <script> src Attribute

Step 2 - Instilize the plugin by #id selector

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

<!-- #### VANTA JS PLUGIN ### -->
<!-- A. vanta js assets -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.waves.min.js"></script>
<!-- B. Instilize vanta js by #id selector -->
<script> 
   VANTA.WAVES('#vantajs')
</script>

Result:

live url:

0 Likes

#3

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

0 Likes

#4

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

0 Likes

#5

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