Animated diagram/schema inside a slide

[stephanedaviet]

I would like to have an animated diagram inside a slide, something to describe a step by step workflow. The diagram is in SVG format. In the past, I have successfully done this kind of thing with RevealJS and some specific JS to manipulate the SVG, but with Marp, I don't know how to achieve the same effect. Thanks in advance.

[yhatt]

Unlike reveal.js, Marp is mainly targeted to the static slide such as a PDF slide. Optional animations for each rendered elements, that are triggered when appearing a slide page in HTML, can set through CSS, but detailed animations that are triggered from fragment navigations within a single page are out of the scope of Marp ecosystem.

If you want more interactive slides, using suitable tool for the your purpose is the best.

---

In Marp, you can animate elements rendered by Markdown through inline style <style>, or embed SVG image that has predeclared animations.

A following example is presenting animated steps. It must be required to enable raw HTML tag rendering in Markdown by the preference (--html option in Marp CLI, and extension settings in Marp for VS Code). You should use this option at your own risk due to insecure.

# Animated SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 300" width="100" height="300">
  <path class="stroke step1" d="M10 76.79l53.57-53.58v53.58H10z"></path>
  <path class="stroke step2" d="M10 176.79l53.57-53.58v53.58H10z"></path>
  <path class="stroke step3" d="M10 276.79l53.57-53.58v53.58H10z"></path>
  <defs>
    <style>
      .stroke {
        fill: none;
        stroke: #0288d1;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 5px;
      }
      .step1, .step2, .step3 {
        stroke-dasharray: 183 185;
        stroke-dashoffset: 184;
        animation: animated-stroke 1s linear 1 both;
      }
      .step2 {
        animation-delay: 1.5s;
      }
      .step3 {
        animation-delay: 3s;
      }
      @keyframes animated-stroke {
        to { stroke-dashoffset: 0; }
      }
    </style>
  </defs>
</svg>

(Required to enable HTML in Markdown)

You can also use an external SVG image ![](step-image.svg) that is including pre-declared animations instead. But in that case, SVG will not restart animation from beginning when navigated slide page.

[stephanedaviet]

OK, thanks for the insights. Marp is really a plus compared to RevealJS for its simplicity specially. Getting some animation in the HTML presentation mode doesn't seem incompatible to me with producing static slides, but I fully understand that, as the core maintainer, you get some strong guidelines driving the roadmap of Marp, which is still great with or without animations!