How to morph on click

Hoping to get help from anyone who knows custom code.

I’m extremely new to threejs and have been teaching myself everything this far. But I have a question I can’t seem to find the answer to. I have two click eventListeners that change my perlin noise from one shape to another. It works flawlessly but when you do click it’s an instant change to the other one. I’m trying to figure out how instead of having an immediate and jarring change, to instead morph the first one into the next one gradually so it looks smooth and nice.

Please any help would be so awesome. If someone can please explain how I would rewrite my current code to work for my project. Thanks again!!!

Currently here is what my listeners look like…

		window.addEventListener("mousedown", function(event){
	    config.shader.time = 0.01;
    config.shader.u_noise = 0.33;
			config.shader.decay = 0.86;
			config.shader.turb = 0.20;
			config.shader.scale = 3.0;
			config.shader.waves = 10;
			//config.shader.size = 1.0;
			config.shader.displ = 0.0;
			config.shader.broken = true;
			config.shader.invert = true;
			config.shader.color = 5.0;
			config.shader.complex = 0.1;
			pn.refresh();
		});

		
	window.addEventListener("mouseup", function(event){
		config.shader.time = 0.17;
			config.shader.u_noise = 0.91;
			config.shader.decay = 0.86;
			config.shader.turb = 0.20;
			config.shader.scale = 5.0;
			config.shader.waves = 1.64;
			//config.shader.size = 1.0;
			config.shader.displ = 0.0;
			config.shader.broken = true;
			config.shader.invert = true;
			config.shader.color = 5.0;
			config.shader.complex = 0.1;
			pn.refresh();
		});

I’m also using this codepen to make my project

https://codepen.io/vcomics/pen/RwQgXzv