I’ll show you how to add an interactive background in Elementor with Vanta JS. So you can add a cool animation effect anywhere in Elementor. We will be using a popular javascript library called vanta.js and you won’t need any coding skills or plugins for this.

00:00 What will you achieve

00:34 Generate animation (sky, birds + other)
First, let’s take a look at how you can generate and customize your animation. Head to the description of this video, and click on the first link.

02:20 Modify Vanta JS to work in Elementor
Next, I’ve prepared some extra code so that it will work well in the Elementor structure.

03:45 Add to Elementor page
Okay so now we have all the code we need, let’s head to a page with Elementor.

04:42 Give a section a CSS ID
To show interactive animation on the website you need to add a class name to one section so that it will work.

In this tutorial, I’ll show how to add animation to your website, especially for Elementor. The animation will be floating in the background and it will react to the mouse movements, this way you can add a bit of atmosphere to the website. You can adjust the animation how you want, as the Vanta JS gives you the freedom to adjust different things.

#elementor #vanta.js