Quarto@revealjs: Trigger SVG animations without using the mouse *into the slide* #11125
Unanswered
rodrigo-j-goncalves
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Description
I am not an expert in SVG, CSS, or even HTML, so maybe this is a silly question (or maybe not!), bear with me.
I need to show SVG animations in my Quarto-revealjs presentation. The workflow I expect when giving the presentation (with a remote controller only, not touching the computer) would be, from the 1st screen (slide Nr. 1) of my presentation:
Ideally, if the SVG has more than one animation, I would be able to advance one by one by clicking on the remote controller.
To test this, I made a simple SVG animation test and included it into my Quarto presentation (revealjs). The animation makes the rectangle change color twice, and another one is a moving circle.
My problem is the animation's triggering: It is currently set to begin when the user clicks on the SVG image. This means I have to physically go to the computer, grab the mouse, and click into the rectangle for each animation.
This is a bit cumbersome. Instead, I want to trigger the animation only with the controller (which, I assume, is equivalent to space bar keystroke).
In the SVG code, there are many other options to begin the animation instead of
click
. I tried almost all of them (includingkeydown
) and I was not able to start the SVG animation with the spacebar or right arrow key, which is what I would normally do during the presentation.I investigated a bit in other forums and it seems that, if I understood correctly, the problem is that the focus is not on the SVG element of the presentation, but rather controlled by the parent, which I assume is Quarto. I am not sure if I can ask Quarto to transfer the focus to a specific element of the slide (in this case, the SVG) after showing the 'initial slide', or if there is a better way to do it.
So in sum, is there is any way to activate the trigger of a SVG element from the quarto@revealjs presentation, without having to specifically interact with the SVG element? Basically I want to be able to show my quarto presentation from start to end, including animations in SVGs, etc. by only using the remote controller (or, only using the spacebar, or only right arrow key), i.e. without having to grab the mouse and click on the SVG.
Below I include a reproducible example.
Thanks to all the folks in Quarto and Revealjs for making these super tools available for everyone :)
This is the qmd file
This is test-click1.svg
And this is circle-click.svg
Beta Was this translation helpful? Give feedback.
All reactions