Interactive animations for your websites

A few months ago I told you about the ThreeJS library, which lets you create scenes and animations in Javascript, in this article.

Today let me introduce you to Vanta.js, a library based on ThreeJS that lets you create beautiful interactive animations that can be used as backgrounds for your websites.

This library takes care of:

• Handling the rendering and the animations
• Placing itself directly as the background of the assigned element
• Adapting the size of the animation to the size of the parent element
• Offering customization options (colors, size, number of elements, etc.)
• ...

Here's an example of a default Vanta.js render:

It's very simple to use, here's the script used for the render above:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.halo.min.js"></script>
<script>
VANTA.HALO({
  el: "#vanta",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  size: 2.50
})
</script>

You can discover all the renders and the possible customization options directly on the official website:

However, you should be careful because ThreeJS + VantaJS weigh around 600KB (minified, without gzip), so I'd encourage you to choose this solution only if it truly adds something to your projects, and not to overuse it, as it can slow down your site's loading time and framerate...

Also, some animations aren't compatible with all mobile devices, so remember to use a static color or image as a fallback.