Slide transitions

Transitions add a dynamic touch to your slides. You can specify the transition effect for your slides using the transition property. Demo Time supports various transitions, including:

• fadeIn
• slideRight
• slideLeft
• slideUp
• slideDown
• zoomIn
• zoomOut
• rotateIn
• rotateOut

Tip

You can change the transition effect duration by setting the --demotime-transition-duration CSS variable in your custom CSS file.

Example

---
transition: fadeIn
---

# Welcome to Demo Time!

This will apply a fade-in transition to the slide when it is displayed.

Reduced motion

Big zoom and rotate transitions can be uncomfortable for people who are sensitive to motion. When reduced motion is on, Demo Time replaces every slide transition with a short crossfade, and the animation components and animated SVG slides show their end state.

The demoTime.slideReducedMotion setting controls it:

• auto (default): follow the workbench.reduceMotion setting of VS Code. Its default auto follows the reduced motion setting of your operating system.
• on: always reduce motion on the slides.
• off: always animate the slides, even when VS Code or your operating system reduces motion. Use it when you want the transitions on the projector regardless of your own settings.

.vscode/settings.json

{
  "demoTime.slideReducedMotion": "off"
}

Changes to the setting apply to the open slide preview right away.

Tip

While reduced motion is on, the slide preview has a data-reduced-motion attribute on its <html> element. Use it to turn off the animations in your own theme or custom components:

:root[data-reduced-motion] .my-animation {
  animation: none;
}