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.