Animations

Demo Time provides you a couple of animation components to show or hide content during your presentations. On this page, you will learn how to use them.

Click steps

The dt-show, dt-hide and dt-list components reveal or hide content step by step. All of them share one click counter per slide, and the clicks attribute is the click number on which a component changes. Components with the same clicks value change together.

Every “next” input reveals the next click step:

• The right arrow key or PageDown (the button most presenter clickers send)
• A click on the slide (clicks on the slide controls, links, buttons and dt-action don’t count)
• The Next button in the slide controls, the remote control and the API
• Auto-advance with the autoAdvanceAfter slide property, which reveals one step per interval

Once all click steps are revealed, the next input moves to the next slide. The left arrow key or PageUp hides the last revealed step again, and when you go back to a previous slide, it shows with all its steps revealed.

Note

In presentation mode, the keys use the Demo Time: Start and Demo Time: Previous keybindings, so they work wherever the focus is. Outside presentation mode, the keys only step through the slide when the preview has focus.

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>

Caution

If you insert Markdown content inside the dt-show component, make sure to add an extra line break before and after the Markdown content inside the component. Otherwise, the Markdown parser will not work correctly.

Properties

The dt-show component supports the following properties:

• clicks: Number of clicks required to show the content (default is 1)

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>

Caution

If you insert Markdown content inside the dt-hide component, make sure to add an extra line break before and after the Markdown content inside the component. Otherwise, the Markdown parser will not work correctly.

Properties

The dt-hide component supports the following properties:

• clicks: Number of clicks required to hide the content (default is 1)

Fade in

The fade-in component allows you to animate content with a fade effect. You can control the direction, duration, and delay of the animation. It can be used for text and other types of elements.

Fade in animation

<fade-in direction="right" duration="2000" delay="1000">
  Content fades in from the right
</fade-in>

Caution

If you insert Markdown content inside the fade-in component, make sure to add an extra line break before and after the Markdown content inside the component. Otherwise, the Markdown parser will not work correctly.

Properties

The component supports the following properties:

• delay: Delay before animation starts in milliseconds
• direction: Controls the fade direction - none, right, left, up, down (optional - default is none)
• duration: Animation duration in milliseconds
• distance: Distance of the fade effect in pixels (default is 20)

Text animations

Text typewriter

The text-typewriter component creates a typing animation effect:

Typewriter effect

<text-typewriter duration="3000" delay="1000" cursor repeat>
  This text appears as if being typed...
</text-typewriter>

Properties

• delay: Delay before typing starts (in milliseconds)
• duration: How long the typing animation takes (in milliseconds)
• cursor: Shows a blinking cursor (optional)
• cursor-color: Color of the cursor (optional - default is #000)
• cursor-width: Width of the cursor (optional - default is 2)
• cursor-blink-speed: Blinking speed of the cursor (optional - default is 500)
• repeat: Repeats the animation (optional - default is false)

Text highlight

The text-highlight component animates a highlight effect over text:

Text highlight animation

<text-highlight highlight-color="rgba(250, 204, 21, 0.5)" direction="center-out">
  This text gets highlighted
</text-highlight>

Properties

• delay: Delay before typing starts (in milliseconds)
• duration: How long the typing animation takes (in milliseconds)
• highlight-color: Color of the highlight (optional - default is #ffff00)
• direction: Direction of the highlight animation - left-to-right, right-to-left, center-out (optional - default is left-to-right)
• repeat: Repeats the animation (optional - default is false)

Reduced motion

When reduced motion is on, the animation components show their end state right away:

• fade-in shows its content without fading or moving it
• text-typewriter shows the whole text, with a steady cursor when cursor is set
• text-highlight shows the whole highlight

The delay, duration and repeat properties are ignored. Click steps (dt-show, dt-hide and dt-list) keep working as usual, as they don’t animate.

Combining animations

You can combine multiple animations in a single component. For example, you can use the dt-show component with the text-highlight component to create a highlight effect that appears after a click:

Highlight effect after one click

This is some text <dt-hide>with important</dt-hide><dt-show><text-highlight highlight-color="rgba(250, 204, 21, 0.5)" direction="center-out">with important</text-highlight></dt-show> information.