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
- Create Frames:
- Use the Frame Tool (
fkey, toolbar, or command palette). - Each frame represents a slide.
- Define Slide Order:
- The order of frames is based on their y-axis position.
- 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).
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:
