Black Lives Matter. Please consider donating to Black Girls Code today.

Contour animation white flickering during frame transitions

Hello, I want to make contours animation, but every frame contour flickers to white before it shows, here is example code, could somebody help to avoid white flickering? :slight_smile:

const N = 40;
var z = new Array(N);
var i = 0;

for (let t = 0; t < N; t++) {
	z[t] = new Array(5);
	for (let y = 0; y < 5; y++) {
		z[t][y] = new Array(5);
		for (let x = 0; x < 5; x++) {
			z[t][y][x] = Math.random();
		}
	}
}

Plotly.plot("plotDiv", [
	{
		z: z[0],
		type: "contour"
	}
]);

function update() {
	Plotly.animate(
		"plotDiv",
		{
			data: [{ z: z[i] }]
		},
		{
			transition: {
				duration: 0
			},
			frame: {
				duration: 50
				//   redraw: false
			}
		}
	);
	i++;
	if (i > z.length) i = 0;
	requestAnimationFrame(update);
}

requestAnimationFrame(update);

That’s the expected behavior unfortunately at the moment. Only scatter traces support “smooth” transitions.

Thanks for reply. Is this fundamental issue in architecture? or we can expect such fix in near future?