Animations with Svelte/Svelte kit

plotly.js
#1

Hello! Very very new to js, I was wondering if plotly.animate or any other ways to animate work in svelte with script.onload ?

With Svelte I’ve tried onMount() and inside that script.onload, it loads my graph but (even though the frames are right) the animation side of things doesn’t work.

Here’s my code starting from the treemap data :slight_smile: I tried plotly.animate but it didn’t do anything so I took it out

<script>

   tm_data = { // treemap data
		type: "treemap",
		labels: tx_list,
		parents: block_root,
		marker: {colorscale: 'Greens'}

		}; 
		
		frames.push(tm_data)

    if (frame0 == null) { // the very first frame to show
		frame0 = tm_data;
		}
	
	}

// --------ANIMATION---------------
	var sliderSteps = [];
	for (let i = 0; i < block_range; i++){
    sliderSteps.push({
        method: 'animate', 
        label: frames[i],
        args: [[frames[i]], {
            frame: { duration: duration, redraw: false },
            transition: { duration: duration },
            mode: "immediate",
        }]

        });
}

var layout = {
		'title': "Animation of bitcoin blocks",

		updatemenus: [{
			bordercolor: '#2E8B57',
			buttons: [{
            method: 'animate',
            args: [null, {frame: {duration: duration, redraw: false}, fromcurrent: true, transition: {duration:     duration}, mode: 'immediate'}],
            label: 'Play'
			}],
			direction: 'left',
			pad: {'r': 10, 't': 10},
			showactive: false,
			type: 'buttons',
			x: 0.1,
			xanchor: 'right',
			y: 0,
			yanchor: 'top'
			}],
			type: 'buttons', 
			buttons: [{
			method: 'animate',
			args: [null, {
				frame: {duration: duration, redraw: false},
				mode: 'immediate',
				fromcurrent: true, 
				transition: {duration: duration},
			}],

			label: 'Play' 

			}, {
			method: 'animate',
			args: [[null], {
				mode: 'immediate', 
				transition: {duration: 0},
				frame: {duration: 0, redraw: false}
			}],

			label: 'Pause'

			}],
		

		sliders: [{
			active: 0,
			steps: sliderSteps,
			x:0,
			y:0,
			len:0.9,
			xanchor: 'left',
			yanchor: 'top',
			pad: {'t': 50, 'b': 10},
			currentvalue: {
			visible: true,
			prefix: 'Block:',
			xanchor: 'right',
			font: {size: 20, color: '#666'}
		},
		transition: {duration: duration},
		}]
	};


	
	
	onMount(() => { // i think this is called at the end when it's compiling everything
	
	let script = document.createElement('script');
		script.src = "https://cdn.plot.ly/plotly-latest.min.js"
		document.head.append(script);

		script.onload = function() {
			Plotly.newPlot('myDiv', {data:frames, layout:layout, frames: frames})

		};

	});

</script>

Also going to try out svelte-kit sometime today…
Thanks!

#2

Hello @SaartjeLy,

Is there anyway that you could post a jsfiddle for ease of beginning to troubleshoot this problem?

#5

Hey, thanks for your reply. I moved some things around and got the frames to animate. Now unfortunately everything in my layout has disappeared (slider and buttons), thoughts on this? Here’s the code for creating the plot:

script.onload = function() {

Plotly.newPlot('myDiv', frame0, layout) 
.then(function() {
    Plotly.addFrames('myDiv', frames);
})
.then(function(){
  Plotly.animate('myDiv')
})

}

:slight_smile:

#6

Hello @SaartjeLy,

You should be adding your frames inside the layout on the initial chart creation.

#7

Hi, do you mean

var layout = {
'title' = ...,
frames = frames,
.....
}

I’ve tried this before and no luck :slight_smile:

#8

Can you please try to get what you are seeing working in jsfiddle?

I cant reproduce currently.

#9

Hi, all js fiddle is showing is the header, here is the error
“57:4 SyntaxError: import declarations may only appear at top level of a module”
I’m confused because I put all imports at the top of js thanks

#10

Can you send me what you have on the jsfiddle? That’s why I wanted you to do jsfiddle. :grin: