Animating SVG elements for revealjs presentations

[ddspot]

I wonder how to go about animating different elements of SVG in a presentation. I tried adding the RevealAnimate plugin (https://github.com/rajgoel/reveal.js-plugins/tree/master/animate) but was not successful.

Any thoughts on this?

I really appreciate any help you can provide.

[RoyiAvital]

Is this different from the built in animation engine?

[mcanouil]

Check how the attribution plug-in was implemented as a Quarto extension, it might help: https://github.com/quarto-ext/attribution.

[ddspot]

My setup was off...the example you provided helped... many thanks

[MariaT0]

@ddspot would you mind sharing an example of how you got it to work within a quarto doc? All I want is to be able to show svg elements as fragments

[RoyiAvital]

@MariaT0 , Did you have any luck achieving this?

[MariaT0]

no, but I stopped trying at some point :/

[RoyiAvital]

I found https://github.com/fradav/quarto-revealjs-animate on the extension page.

[rodrigo-j-goncalves]

I've been working on something like this for some time, and this issue brought me back to action.
For my lectures, I love creating SVG files with lots of different elements that I want to later show one by one.
I tried to accomplish this with the extensions you mentioned above, but I was never able to really use them (a pity, they looked really promising). So I created my own extension, and I hope it is useful for you.

This is the extension: progressvg

The main aim is to show SVG elements progressively. This is my normal workflow:

1. I create a new file in Inkscape, with lots of elements: text, lines, etc., even copy-pasted images (bitmaps).
2. Give each element a unique name
3. save as SVG

Then, in my QMD file, I just 'call' each object by its name (Inkscape label, or plain ID if the SVG file was not generated by Inkscape)

Unfortunately, this extension does not animate (in the sense of moving objects around), but if you just want to show/hide parts of a SVG without having to brute-force slides (as I used to do), then this extension may be of some use to you.

I hope it is useful!