Animate.css Extension for Quarto

Quarto Extension

This extension provides support and shortcode to animate.css.

Animations are only available for HTML-based documents.

Installation

quarto add mcanouil/quarto-animate@1.7.0

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 attributes: delay, duration, repeat, stagger, direction:

  {{< animate <effect> "<text>" delay=... duration=... repeat=... stagger=... direction=... >}}

  • delay, duration, and stagger are CSS times and require a unit (s or ms), e.g., 1s or 800ms.
  • repeat accepts a positive integer or infinite.
  • direction accepts one of normal, reverse, alternate, or alternate-reverse.

  Invalid values emit a warning and fall back to the default; 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
{{< animate bounce "Some text" direction=alternate >}}	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
    stagger: 0s
    direction: normal

Sequencing with stagger

Pass stagger=<time> to add an incremental delay between sequential shortcode calls in the document. The first call uses the base delay; each subsequent call adds the stagger value on top.

Shortcode	Text
{{< animate fadeIn "One" stagger=300ms >}}	One
{{< animate fadeIn "Two" stagger=300ms >}}	Two
{{< animate fadeIn "Three" stagger=300ms >}}	Three

Direction

The direction attribute maps to the CSS animation-direction property and accepts normal, reverse, alternate, or alternate-reverse.

Shortcode	Text
{{< animate bounce "Reverse" direction=reverse repeat=2 >}}	Reverse
{{< animate bounce "Alternate" direction=alternate repeat=2 >}}	Alternate

Special characters

HTML special characters in the animated text are escaped automatically, so quotes, ampersands, and angle brackets render correctly:

{{< animate bounce "Cats & dogs <3" >}}

Cats & dogs <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