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
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?
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.
Juan Pablo Isaza