How to auto-animate?

[MarionMoseby]

I have spent a whole afternoon trying to figure out how to use reveal.js 's auto-animate feaures, but I see no way :(

[davidovich]

Could you tell us what you have tried ? Are you using the latest version of reveal-hugo (which updated its embedded reveal-js at 4.4.0) ?

To my knowledge, reveal-hugo does not yet have facilitators for the auto-animate feature.

But it does support adding html in your slides:

<section data-noprocess>
  <h1>Hello, world!</h1>
</section>

With this feature, can you use the reveal-js animation blocks ?

[davidovich]

I created a test slideshow with one _index.md file with this content in it:

+++
title = "Animations"
outputs = ["Reveal"]
+++

# Automated animations

---

<section data-noprocess data-auto-animate>
  <h1>Auto-Animate</h1>
</section>
<section data-auto-animate>
  <h1 style="margin-top: 100px; color: red;">Auto-Animate</h1>
</section>

---

Another slide

This animation block was copied from the auto-animate reveal-js documentation.

Note that you need the latest reveal-hugo as this animation feature was added with reveal-js 4.0 and reveal-hugo was updated to support 4.4.0 on February 7 2023.

[chandlerc]

In case others roll up here looking for how to get this to work with the {{< slide ... >}} shortcode:

---
{{< slide auto-animate="" >}}

...

Did the charm for me. Note that the ="" is necessary! I found that very surprising, but without that everything gets confused as it processes the params as a key-value pair, and when using {{< slide auto-animate >}} it treats this as a positional parameter, with a key of 0 and a value of "auto-animate", which doesn't do anything useful. Took me a bunch of reading the shortcode source to figure that out, and so maybe worth adding to the docs somewhere.

[zellyn]

Sorry to bother you, but even with this discussion, I'm still struggling. Is there a way to replicate the code animation at https://revealjs.com/auto-animate/#example%3A-animating-between-code-blocks ?

I can almost get it to work by just copy/pasting that HTML in directly, but for some reason the code block is black writing on a white background, even though the rest of my presentation (and code blocks) are white on black.