Experimenting with revealjs animation

presentations

revealjs

I want to update my technique for creating presentations so I can include fancy animation and transitions.

Published

March 9, 2025

I regularly do presentations, and the most recent half dozen I have done have been created with revealjs. The big advantage with revealjs is that I can create the whole presentation in an editor, export it as markdown, and convert to a revealjs presentation. This means I can do stuff with gen AI as part of the process, for example converting detailed notes into short bullet-point presenter notes.

I would like to take the next step with this process, adding animations to:

go from presenting an image with title/artist to full screen image.
display maps, zooming in on particular points.
Display a timeline, zooming in on a particular date.

revealjs has it’s own auto-animate system built-in, and it’s quite neat, basically tweening from one slide to the next and automatically identifying which elements to tween. So let’s experiment with that and see if it can do what I want.

Presenting an image

A basic slide in my Markdown file might be like this:

[IMAGE]

* These are my notes. 
* Anything that is a bullet point after an image is converted to presenter notes. 
* The image is displayed full-screen.

I want to add a picture title, artist and date to this, and make it so that the picture becomes full screen on the next slide. How should I do that using the Revealjs auto animation mechanism? It’s fairly easy. Here’s what the relevant bit of code looks like:

  <div class="reveal">
    <div class="slides">

      <section data-auto-animate>
        <img data-id="zoom1" src="expulsion_del_paraiso.jpg" style="width:75%;height:75%" />
        <h2>The Fall and Expulsion from Paradise</h2>
        <h3>Michelangelo, Sistine Chapel, 1509</h3>
      </section>

      <section data-auto-animate>
          <img data-id="zoom1" src="expulsion_del_paraiso.jpg" style="width:120%;height:120%" />
      </section>
      
    </div>
  </div>

And here’s what it looks like in action:

The above is a revealjs slideshow with two slides, you should be able to go to the next slide to see the effect. If you want to see this full screen, here it is.

After going to the full-screen slide, I can use the image zoom technique I talked about at the end of this experiment: Image Zoom experiment with revealjs.

So I need to update my Markdown to contain the image details, and I need code to generate the revealjs HTML code as above. What is the neatest way to add the title and artist to my Markdown? I can think of a variety ways to do this, but there may be a best practice way in Markdown. I’ll ask ChatGPT.

Of course, YAML is the way. So I should add the details like this:

[IMAGE]

---
title: The Fall and Expulsion from Paradise
artist: Michelangelo, Sistine Chapel, 1509
---

* These are my presenter notes.

That looks neat and flexible. Now I need a script to automatically convert my slideshow, as a markdown export, into a revealjs slideshow. I’ll do that with Claude 3.7 Sonnet. That counts as creating, so I’ll do a separate write-up on that.