Slideshow with animation (example implementation)

[mgabor01]

Hi,

I added basic animation capabilities to the slideshow script, freedraw elements are drawn, rest fades in. I am sharing it in case this has any useful ideas.

excal_anim.mov

Currently I use distinct rectangles as slides instead of a continous arrow. The main idea of the script is to add labels to the elements in a way that slides and their animated elements can be connected. And there is a control-text that has the order in which the slides should play, and some information about their corresponding animations.

As my knowledge of excalidraw and javascript is very limited I only use the link property of an element to add labels.

s1 is the label of the first slide, a 1 1 is the first animation of the first slide. The s1 :a means s1 will be the first slide, and play all its animations when the slide is active. (It is done like this for easy slide reordering, and more control over animation and slide order, but there are a lot of possibilities like using groups - same group for slide and corresponding elements etc.)

Issues

There are issues, such as the image flickering when drawing other elements as it can be seen on the vid.
Zsolt, is this even the right way to change end redraw elements?: with sleep and ea.addElements?

		while(el.opacity <= 100){
			//await ea.clear();
			el.opacity+=4;
			await sleep(10);
			await ea.addElementsToView();
		}

Notes

the camera movement is the linear one that I posted previously, but of course that has no relevance.
If any of this is interesting I can post/put in more details or the code, but it is less then fancy...:)
(Zsolt, this plugin is remarkable!)