Animate.css Extension for Quarto

This extension provides support and shortcode to animate.css.
Animations are only available for HTML-based documents.

Installing

quarto add mcanouil/quarto-animate

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

Using

To animate a text, use the {{< animate >}} shortcode. For example:

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

Mandatory <effect> and <text>:
```
{{< animate <effect> "<text>" >}}
```
Optional <delay=...>, <duration=...>, and <repeat=...>:
```
{{< animate <effect> "<text>" <delay=...> <duration=...> <repeat=...> >}}
```
<delay=...> and <duration=...> are durations requiring unit, e.g., 1s or 800ms.
See https://animate.style/ for more details.

Animation effects

Attention seekers:
bounce, flash, pulse, rubberBand, shakeX, shakeY, headShake, swing, tada, wobble, jello, heartBeat.
Back entrances:
backInDown, backInLeft, backInRight, backInUp.
Back exits:
backOutDown, backOutLeft, backOutRight, backOutUp.
Bouncing entrances:
bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp.
Bouncing exits:
bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp.
Fading entrances:
fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeInTopLeft, fadeInTopRight, fadeInBottomLeft, fadeInBottomRight.
Fading exits:
fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, fadeOutTopLeft, fadeOutTopRight, fadeOutBottomRight, fadeOutBottomLeft.
Flippers:
flip, flipInX, flipInY, flipOutX, flipOutY.
Lightspeed:
lightSpeedInRight, lightSpeedInLeft, lightSpeedOutRight, lightSpeedOutLeft.
Rotating entrances:
rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight.
Rotating exits:
rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight.
Specials:
hinge, jackInTheBox, rollIn, rollOut.
Zooming entrances:
zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp.
Zooming exits:
zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp.
Sliding entrances:
slideInDown, slideInLeft, slideInRight, slideInUp.
Sliding exits:
slideOutDown, slideOutLeft, slideOutRight, slideOutUp.

Advanced

The following won't work:

{{< animate bounce "[HTML](https://m.canouil.dev/quarto-animate/)" >}}

But this will:

[[HTML](https://m.canouil.dev/quarto-animate/)]{.animate__animated .animate__bounce style="display:inline-block;"}

Or:

::: {.animate__animated .animate__bounce}
[HTML](https://m.canouil.dev/quarto-animate/)
:::

See https://animate.style/ for more details.

Example

Here is the source code for a minimal example: example.qmd.

This is the output of example.qmd for HTML.

Animate.css by Daniel Eden under Hippocratic License 3.0.