css - SVG animation in external markdown in reveal.js

Question

I have been attempting to create a reveal.js presentation that includes moderately interactive animation. I decided the best and easiest way to do that was to write the presentation in external markdown and incorporate SVG animations into a couple slides. I generated an animation using SVG Circus and copy/pasted the code into my external markdown file.

The problem I have found is that when including SVG animation commands into an external markdown file is that the SVG will display, but it will not animate. I don't know what exactly is going wrong. When the SVG code is included into the direct .html document, it animates, but displays on every slide - not just the slide I want it to.

So, my questions are

1. Is there a recommended way to incorporate SVG animations into reveal.js? I have attempted to use the animate plugin found here but to no avail.
2. I would like to continue using external markdown to develop my slides. Why does markdown break the animation? If the fault is due to external markdown, how would I work around it?

My presentation is here and the way the animation should behave is here. Additionally, the markdown file and html file can be found here. Thank you.

Answer 1

Well, I've been working on it, and I think I found what the potential issue is.

The generator I used (SVG Circus) exports the svg animation script in ECMAScript, which doesn't seem to play nicely with reveal.js or the third-party reveal.js-plugins pages. (It works fine on a blank html page, though. I have a feeling that it could work, but I am JS illiterate as of now.) I attempted to use RevealAnimate, from reveal.js-plugins by Raj Goel, to circumvent this issue, but it utilizes svg.js, so that was a bust too. Fortunately, reveal.js, external markdown and RevealAnimate play nicely with native SVG commands, so something that was written and animated in pure SVG will be hidden, shown, and typeset perfectly in reveal.js if you include it in your markdown like any other image, like so:

![Alt text.](your_animated_svg.svg)

So, you either need to code up your own native SVG files, code up animations in svg.js and use RevealAnimate, or use a generator that exports in pure SVG. Personally, if you want to put interactive SVG animations into your presentations, you probably should stick with RevealAnimate, but if you just want an animated SVG, I would recommend using Freestyle from blender. It can export 3d or 2d animations as pure SVG.