Animate.css Extension for Quarto

Quarto Extension

Author

Mickaël CANOUIL, Ph.D.

This extension provides support and shortcode to animate.css.

Animations are only available for HTML-based documents.

Installation

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.

Usage

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

  • 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.

For example:

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

Some text
{{< animate flip "Some text" repeat=2 >}}

Some text
{{< animate hinge "Some text" delay=3s duration=4s repeat=infinite >}}

Some text

Defining default values for animations can be done in the YAML front matter of your document:

extensions:
  animate:
    delay: 5s
    duration: 10s
    repeat: 3

Advanced

The following won’t work:

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

But this will:

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

HTML

Or:

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

HTML

Available Effects

Attention Seekers

  • bounce bounce
  • flash flash
  • pulse pulse
  • rubberBand rubberBand
  • shakeX shakeX
  • shakeY shakeY
  • headShake headShake
  • swing swing
  • tada tada
  • wobble wobble
  • jello jello
  • heartBeat heartBeat

Back Entrances

  • backInDown backInDown
  • backInLeft backInLeft
  • backInRight backInRight
  • backInUp backInUp

Back Exits

  • backOutDown backOutDown
  • backOutLeft backOutLeft
  • backOutRight backOutRight
  • backOutUp backOutUp

Bouncing Entrances

  • bounceIn bounceIn
  • bounceInDown bounceInDown
  • bounceInLeft bounceInLeft
  • bounceInRight bounceInRight
  • bounceInUp bounceInUp

Bouncing Exits

  • bounceOut bounceOut
  • bounceOutDown bounceOutDown
  • bounceOutLeft bounceOutLeft
  • bounceOutRight bounceOutRight
  • bounceOutUp bounceOutUp

Fading Entrances

  • fadeIn fadeIn
  • fadeInDown fadeInDown
  • fadeInDownBig fadeInDownBig
  • fadeInLeft fadeInLeft
  • fadeInLeftBig fadeInLeftBig
  • fadeInRight fadeInRight
  • fadeInRightBig fadeInRightBig
  • fadeInUp fadeInUp
  • fadeInUpBig fadeInUpBig
  • fadeInTopLeft fadeInTopLeft
  • fadeInTopRight fadeInTopRight
  • fadeInBottomLeft fadeInBottomLeft
  • fadeInBottomRight fadeInBottomRight

Fading Exits

  • fadeOut fadeOut
  • fadeOutDown fadeOutDown
  • fadeOutDownBig fadeOutDownBig
  • fadeOutLeft fadeOutLeft
  • fadeOutLeftBig fadeOutLeftBig
  • fadeOutRight fadeOutRight
  • fadeOutRightBig fadeOutRightBig
  • fadeOutUp fadeOutUp
  • fadeOutUpBig fadeOutUpBig
  • fadeOutTopLeft fadeOutTopLeft
  • fadeOutTopRight fadeOutTopRight
  • fadeOutBottomRight fadeOutBottomRight
  • fadeOutBottomLeft fadeOutBottomLeft

Flippers

  • flip flip
  • flipInX flipInX
  • flipInY flipInY
  • flipOutX flipOutX
  • flipOutY flipOutY

Lightspeed

  • lightSpeedInRight lightSpeedInRight
  • lightSpeedInLeft lightSpeedInLeft
  • lightSpeedOutRight lightSpeedOutRight
  • lightSpeedOutLeft lightSpeedOutLeft

Rotating Entrances

  • rotateIn rotateIn
  • rotateInDownLeft rotateInDownLeft
  • rotateInDownRight rotateInDownRight
  • rotateInUpLeft rotateInUpLeft
  • rotateInUpRight rotateInUpRight

Rotating Exits

  • rotateOut rotateOut
  • rotateOutDownLeft rotateOutDownLeft
  • rotateOutDownRight rotateOutDownRight
  • rotateOutUpLeft rotateOutUpLeft
  • rotateOutUpRight rotateOutUpRight

Specials

  • hinge hinge
  • jackInTheBox jackInTheBox
  • rollIn rollIn
  • rollOut rollOut

Zooming Entrances

  • zoomIn zoomIn
  • zoomInDown zoomInDown
  • zoomInLeft zoomInLeft
  • zoomInRight zoomInRight
  • zoomInUp zoomInUp

Zooming Exits

  • zoomOut zoomOut
  • zoomOutDown zoomOutDown
  • zoomOutLeft zoomOutLeft
  • zoomOutRight zoomOutRight
  • zoomOutUp zoomOutUp

Sliding Entrances

  • slideInDown slideInDown
  • slideInLeft slideInLeft
  • slideInRight slideInRight
  • slideInUp slideInUp

Sliding Exits

  • slideOutDown slideOutDown
  • slideOutLeft slideOutLeft
  • slideOutRight slideOutRight
  • slideOutUp slideOutUp