Experimenting with revealjs animation
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 might be like this:
- 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. How should I do that?
Let’s take a look at how to create the revealjs animation I want. It should be something like this:
<section data-auto-animate>
<h1>Auto-Animate</h1>
</section>
<section data-auto-animate>
<h1 style="margin-top: 100px; color: red;">Auto-Animate</h1>
</section>