Excalidraw Smart Presentation

Create dynamic, animated presentations directly within Excalidraw.

This tool allows you to define frames as slides, automatically animating elements that persist between frames. It enables seamless transitions and a structured way to present ideas visually.

excalidraw-smart-presentation.mp4

Presentation source: Available in ./presentation-docs.

How to Use

1. Create Frames:

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

2. Define Slide Order:

   • Frames are ordered based on their y-axis position.

3. Animations:

   • Elements that are duplicated from one frame to the other are animated on slide transition by interpolating the changes in their properties.
   • This behavior can be customized (see below).

4. Present Your Slides:

   • Click "Present", then use → / ← (arrow keys) to navigate.

Tips & Tricks

• Start from a Specific Slide:

  • Select a frame, then click "Present".

• Maintain a 16:9 Aspect Ratio or any exact size:

  • Edit frame size via "Canvas & Shape Properties" (Alt + / or command palette).

• Duplicate an element into the exact same position in the next frame:

  • Select an element, then press Ctrl + Shift + D
  • Or use "Duplicate into next frame" from the command palette.

• Fix Unintended Animations:

  • Elements with the same name in consecutive frames are animated.
  • Elements are given the same name on duplication, hence why duplicated elements are animated.
  • Rename elements in "Canvas & Shape Properties" to prevent unwanted animations or to animate different elements.

Current Limitations

• Not usable on touch-screens and requires a keyboard since arrow keys are the only way to navigate slides.
• The "Present" button is not shown on mobile/small screens, users must open a new tab and append #presentation=0 manually to the website's link.
• Animation duration (300 ms) and type (linear) are not customizable.
• Animations can sometimes be slightly choppy, though this is not a major issue.