Animate

Animate.css effects on a run of text, written as a shortcode.

What the animate extension is for, how to install it, and the smallest shortcode that plays an effect.
Author

Mickaël CANOUIL, Ph.D.

Animate.css is a stylesheet of ready-made CSS animations. Using it in a Quarto document by hand means remembering the right pair of class names, wrapping the text in a span, and setting display: inline-block every time.

animate reduces that to one shortcode. Name the effect, give it the text, and the extension writes the span, validates the timing, and loads the stylesheet.

Installation

quarto add mcanouil/quarto-animate@1.7.2

This will install the extension under the _extensions subdirectory. If you are using version control, you will want to check in this directory.

Or install it from your editor with Quarto Wizard:

Visual Studio Code Positron VSCodium

Quick start

The effect and the text are both required, and the text is quoted:

{{< animate bounce "Some text" >}}

Which renders as Some text.

Timing is set per call:

{{< animate tada "Some text" duration=2s repeat=3 >}}

Which renders as Some text.

Or once, for a whole document or project:

extensions:
  animate:
    duration: 1s
    delay: 1s
    repeat: 1

See the Reference for every option, and the Examples for all ninety-seven effects rendered.

Where it works

HTML formats that carry JavaScript, which covers html and revealjs.

Warning

In every other format the shortcode produces nothing, and the text goes with it. Nothing is left behind: the words are dropped from the PDF, the Word file, and the ePub. Keep animated text decorative, or repeat it in prose that every format keeps.

Back to top