Skip to content
Demo Time

Animations & Components

Animations

Demo Time provides click-based animations to show or hide content during your presentations.

Show Content

The dt-show component allows you to reveal content after a specific number of clicks:

Click twice to show content
<dt-show clicks="2">
  This content appears after 2 clicks
</dt-show>

If no clicks attribute is specified, the content will show after 1 click:

Click to show content
<dt-show>
  This content appears after 1 click
</dt-show>

Hide Content

The dt-hide component allows you to hide content after a specific number of clicks:

Click twice to hide content
<dt-hide clicks="2">
  This content disappears after 2 clicks
</dt-hide>

Components

Demo Time includes several visual components to enhance your presentations.

Arrow

The dt-arrow component draws an arrow with customizable properties:

Show an arrow
<dt-arrow
  x1="0"
  y1="100"
  x2="480"
  y2="100"
  line-color="#15181f"
  line-width="2"
  arrow-head="both">
</dt-arrow>
Arrow component

Properties

  • x1 and y1: Coordinates for the starting point.
  • x2 and y2: Coordinates for the ending point or dimensions.
  • line-color: Color of the line or border.
  • line-width: Thickness of the line or border.
  • arrow-head: Type of arrow head to use.
    • end: Arrow head at the end (default)
    • start: Arrow head at the start
    • both: Arrow heads at both ends

Rectangle

The dt-rectangle component draws a rectangle with customizable properties:

Show a rectangle
<dt-rectangle
  x1="25"
  y1="30"
  x2="375"
  y2="75"
  line-color="var(--vscode-editorError-foreground)"
  line-width="2"
  fill-color="transparent">
</dt-rectangle>
Rectangle component

Properties

  • x1 and y1: Coordinates for the starting point.
  • x2 and y2: Coordinates for the ending point or dimensions.
  • line-color: Color of the line or border.
  • line-width: Thickness of the line or border.
  • fill-color: Fill color for the shape (use transparent for no fill).

Circle

The dt-circle component draws a circle with customizable properties:

Show a circle
<dt-circle
  x1="25"
  y1="25"
  x2="125"
  y2="85"
  line-color="#ffd43b"
  line-width="4"
  fill-color="transparent">
</dt-circle>
Circle component

Properties

  • x1 and y1: Coordinates for the starting point.
  • x2 and y2: Coordinates for the ending point or dimensions.
  • line-color: Color of the line or border.
  • line-width: Thickness of the line or border.
  • fill-color: Fill color for the shape (use transparent for no fill).

Finding the right coordinates

When you open the slide in the preview mode, you can click on the ruler action to see the coordinates of the mouse pointer. This will help you find the right coordinates for your components.

Mouse coordinates