Data

Tools

Indexes

Applications

Experiments

Open Source Science

quarto-animate

Animate.css extension for Quarto.

https://github.com/mcanouil/quarto-animate

Science Score: 44.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ✓
    CITATION.cff file
    Found CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Committers with academic emails
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (6.9%) to scientific vocabulary

Keywords

animate animate-css animation css quarto quarto-extension quarto-pub quartopub

Keywords from Contributors

interpretability standardization hack
Last synced: 6 months ago · JSON representation ·

Repository

Animate.css extension for Quarto.

Basic Info
Statistics
  • Stars: 45
  • Watchers: 2
  • Forks: 0
  • Open Issues: 0
  • Releases: 5
Topics
animate animate-css animation css quarto quarto-extension quarto-pub quartopub
Created over 3 years ago · Last pushed 7 months ago
Metadata Files
Readme Funding License Citation

README.md

Animate.css Extension for Quarto

This extension provides support and shortcode to animate.css.
Animations are only available for HTML-based documents.

Installing

sh 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:

markdown {{< animate bounce "Some text" >}}

  • Mandatory <effect> and <text>:

markdown {{< animate <effect> "<text>" >}}

  • Optional <delay=...>, <duration=...>, and <repeat=...>:

markdown {{< 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.

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

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 by Daniel Eden under Hippocratic License 3.0.

Owner

  • Name: Mickaël Canouil
  • Login: mcanouil
  • Kind: user
  • Location: Lille, France

Biostatistician, Ph. D. (& cinephile) @RLille User Group Organiser

Citation (CITATION.cff) 

cff-version: 1.2.0
title: "Animate.css Extension for Quarto"
message: "If you use this project, please cite it as below."
type: software
authors:
  - family-names: "Canouil"
    given-names: "Mickaël"
    orcid: "https://orcid.org/0000-0002-3396-4549"
repository-code: "https://github.com/mcanouil/quarto-animate"
url: "http://m.canouil.dev/quarto-animate/"
license: "MIT"
date-released: "2025-07-14"
version: 1.2.0

GitHub Events

Total
  • Create event: 27
  • Issues event: 5
  • Release event: 6
  • Watch event: 7
  • Delete event: 25
  • Issue comment event: 5
  • Push event: 51
  • Pull request event: 37
Last Year
  • Create event: 27
  • Issues event: 5
  • Release event: 6
  • Watch event: 7
  • Delete event: 25
  • Issue comment event: 5
  • Push event: 51
  • Pull request event: 37

Committers

Last synced: 8 months ago

All Time
  • Total Commits: 67
  • Total Committers: 2
  • Avg Commits per committer: 33.5
  • Development Distribution Score (DDS): 0.149
Past Year
  • Commits: 46
  • Committers: 2
  • Avg Commits per committer: 23.0
  • Development Distribution Score (DDS): 0.217
Top Committers
Name Email Commits
Mickaël Canouil 8****l 57
github-actions[bot] 4****] 10

Issues and Pull Requests

Last synced: 9 months ago

All Time
  • Total issues: 5
  • Total pull requests: 25
  • Average time to close issues: 9 months
  • Average time to close pull requests: less than a minute
  • Total issue authors: 4
  • Total pull request authors: 2
  • Average comments per issue: 2.4
  • Average comments per pull request: 0.0
  • Merged pull requests: 25
  • Bot issues: 0
  • Bot pull requests: 14
Past Year
  • Issues: 1
  • Pull requests: 19
  • Average time to close issues: about 5 hours
  • Average time to close pull requests: less than a minute
  • Issue authors: 1
  • Pull request authors: 2
  • Average comments per issue: 2.0
  • Average comments per pull request: 0.0
  • Merged pull requests: 19
  • Bot issues: 0
  • Bot pull requests: 14
View more stats
Top Authors
Issue Authors
  • mcanouil (2)
  • mchiapello (1)
  • kevolve (1)
  • ForBo7 (1)
Pull Request Authors
  • github-actions[bot] (25)
  • mcanouil (17)
Top Labels
Issue Labels
Priority: [1] Low (3) Difficulty: [2] Intermediate (2) Type: Bug :bug: (2) Difficulty: [1] Novice (1) Type: CI/CD :robot: (1)
Pull Request Labels
Type: CI/CD :robot: (30) Type: Bug :bug: (6) Type: Documentation :memo: (3) Type: Enhancement :bulb: (2) Type: Valorisation :tada: (1)

Packages

  • Total packages: 1
  • Total downloads: unknown
  • Total dependent packages: 0
  • Total dependent repositories: 0
  • Total versions: 2
proxy.golang.org: github.com/mcanouil/quarto-animate
  • Versions: 2
  • Dependent Packages: 0
  • Dependent Repositories: 0
Rankings
Dependent packages count: 6.4%
Average: 6.7%
Dependent repos count: 6.9%
Last synced: 6 months ago

Dependencies

.github/workflows/deploy.yml actions
  • actions/checkout v4 composite
  • actions/configure-pages v5 composite
  • actions/deploy-pages v4 composite
  • actions/upload-pages-artifact v3 composite
  • quarto-dev/quarto-actions/setup v2 composite