How to Create Excalidraw Animations with Excalidraw Smart Presentation

Preface

Today, I will guide you step by step on how to create Excalidraw animations using the tool Excalidraw Smart Presentation.

Excalidraw is likely familiar to many of you, with its unique hand-drawn style and the open-source community and ecosystem it fosters, attracting a large number of users. It has nearly 100K stars on GitHub, which is an impressive number!

Creating static images with Excalidraw is quite easy, but animating them is relatively challenging. The tool we are introducing today, Excalidraw Smart Presentation, is designed to solve this problem and is also open-source.

You can find the tool on our site, Turbo0.om, which collects a variety of similar video animation creation tools. It is a resource site aimed at content creators/influencers, and we welcome you to explore it.

Tool link: Excalidraw Smart Presentation

Quick Steps Overview

1. Create Frames:

• Use the Frame Tool (f key, toolbar, or command palette).
• Each frame represents a slide.

2. Define Slide Order:

• The order of frames is based on their y-axis position.

3. Animation:

• Elements repeated from one slide to another are animated during slide transitions by interpolating changes in their properties.
• This behavior can be customized (see below).

4. Present Your Slides:

• Click "Present" and navigate using → / ← (arrow keys).

Full Demonstration

First, open Excalidraw Smart Presentation, then press the [F] key to create a new frame. You can think of each frame as a page in a PowerPoint presentation, or each frame in an animation. After creating a new frame, draw some flowcharts you want to present, like this:

At this point, we have drawn the first frame. Next, I will draw the second frame in the same way. However, here we need to first select the previous frame, then use [Command/Ctrl+Shift+D] to duplicate the frame, and then make modifications to the duplicated part.

Then, we can continue to duplicate the last frame each time using [Command/Ctrl+Shift+D] and make modifications. Here, I have simply created a few frames:

Finally, select the content of the first frame, then click the bottom right corner's [Present] to start the presentation. The presentation effect is as follows (use the left and right arrow keys to switch):

Conclusion

Be sure to use [Command/Ctrl + Shift + D] to duplicate the previous frame, and it's best not to change the size of the frame to maintain its proportions.

Alright, this concludes our tutorial demonstration. With this, you can create many interesting architectural flowchart animations. For example, the demonstration animation on the official website looks like this: