https://github.com/mcanouil/quarto-animate
Animate.css extension for Quarto.
https://github.com/mcanouil/quarto-animate
animate animate-css animation css quarto quarto-extension quarto-pub quartopub stable
Last synced: 3 months ago
JSON representation
Animate.css extension for Quarto.
- Host: GitHub
- URL: https://github.com/mcanouil/quarto-animate
- Owner: mcanouil
- License: mit
- Created: 2022-09-03T16:11:14.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2026-02-11T21:29:40.000Z (4 months ago)
- Last Synced: 2026-02-12T05:36:51.603Z (4 months ago)
- Topics: animate, animate-css, animation, css, quarto, quarto-extension, quarto-pub, quartopub, stable
- Language: Lua
- Homepage: https://m.canouil.dev/quarto-animate/
- Size: 155 KB
- Stars: 45
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Citation: CITATION.cff
Awesome Lists containing this project
README
# Animate.css Extension for Quarto
This extension provides support and shortcode to [animate.css](https://animate.style/).
Animations are only available for HTML-based documents.
## Installation
```sh
quarto add mcanouil/quarto-animate@1.5.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. For example:
```markdown
{{< animate bounce "Some text" >}}
```
- Mandatory `` and ``:
``` markdown
{{< animate "" >}}
```
- Optional ``, ``, and ``:
``` markdown
{{< animate "" >}}
```
`` and `` are durations requiring unit, _e.g._, `1s` or `800ms`. See for more details.
Defining default values for animations can be done in the YAML front matter of your document:
```yml
extensions:
animate:
delay: 5s
duration: 10s
repeat: 3
```
## Advanced
The following won't work:
```markdown
{{< animate bounce "[HTML](https://m.canouil.dev/quarto-animate/)" >}}
```
But this will:
```markdown
[[HTML](https://m.canouil.dev/quarto-animate/)]{.animate__animated .animate__bounce style="display:inline-block;"}
```
Or:
```markdown
::: {.animate__animated .animate__bounce}
[HTML](https://m.canouil.dev/quarto-animate/)
:::
```
See for more details.
## Example
Here is the source code for a minimal example: [example.qmd](example.qmd).
Output of `example.qmd`:
- [HTML](https://m.canouil.dev/quarto-animate/)
## 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`.
---
[Animate.css](https://animate.style/) by Daniel Eden under Hippocratic License 3.0.