Skip to content

Latest commit

 

History

History
102 lines (78 loc) · 3.43 KB

README.md

File metadata and controls

102 lines (78 loc) · 3.43 KB
Raw

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.