Description

My web page project has a VantaJS dynamic background, and I'm trying to add an checkbox option to disable the dynamic background.

The "Cleanup" section of the official VantaJS docs explains how to destroy a Vanta effect: https://github.com/tengbao/vanta#cleanup

const effect = VANTA.WAVES('#my-background')
effect.destroy() // e.g. call this in React's componentWillUnmount

Problem

Here's my example code, where I've added a Bootstrap checkbox that should be (in my understanding) destroying the Vanta effect when toggled: https://jsfiddle.net/playdohsniffer/un6hx1q5/131/

Why isn't the Vanta effect being killed when the checkbox is toggled?

It seems like it should work using vanilla Javascript. Is it required to use React to invoke said destroy() function? I'm not familiar with React framework at all...

More details

I'm aware that there's several ways you can hide/remove specific elements from the DOM using vanilla JavaScript. In my example code, I've added two additional buttons demonstrating two such methods:

• style visibility property
• HTML DOM remove() method

However, these various methods are not desirable since they hide/remove the entire contents within the div. Instead, I need to figure out how to destroy the VantaJS element being rendered in the div background (cleaning up consumed resources is the proper way anyway..)

Any advise is appreciated.