Animation starting only on page load/reload

[mchiapello]

Hi, I can see the text animations only when I reload the page. What am I missing?

[mcanouil]

You are not giving any information for me to help. Please provide a reproducible example.

To note, the animation in the example provided within this extension works properly on Safari and Brave (chromium).

[mchiapello]

Here the bit of quarto code

---
title: "Introduzione all' RNASeq"
author: "Marco Chiapello, PhD"
date: "01/04/2023"
institute: "Tor Vergata"
format: 
  revealjs:
    #incremental: true
    logo: images/cropped-cropped-logo-1-10.png
    #footer: "`emitanaka.org/slides/toronto2022`"
    slide-number: true
    multiplex: true
    theme: [simple, assets/monash.scss]
    show-slide-number: all
    controls: true
    width: 1280
    height: 720
    css: [assets/syntax-highlight.css, assets/custom.css, assets/pacman.css]
    header-includes: |
      <link rel="stylesheet" href="/assets/fontawesome-free-6.1.1-web/css/font-awesome.min.css">
      <script defer src="/assets/fontawesome-free-6.1.1-web/js/all.min.js"></script>
execute:
  echo: false
---

# {{< animate tada "Scopi del corso" >}} 
::: {.fragment .fade-in}
:::: info-box-blue

{{< bi 1-circle >}} Acquisire un vocabolario</li>

{{< bi 2-circle >}}Interagire proficuamente con i bioinformatici 

::::
:::

Here sessionInfo

R version 4.2.1 (2022-06-23) Platform: x86_64-apple-darwin17.0 (64-bit) Running under: macOS Ventura 13.1

Matrix products: default LAPACK: /Library/Frameworks/R.framework/Versions/4.2/Resources/lib/libRlapack.dylib

locale: [1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages: [1] stats graphics grDevices utils datasets methods base

loaded via a namespace (and not attached): [1] compiler_4.2.1 tools_4.2.1 glue_1.6.2 rstudioapi_0.14

I run the presentation on Safari 16.2. I can see the animation only on page reload.

[mcanouil]

Ok, it does work, but the "issue" comes from the fact that the animation does not start with the slide but when the HTML is open.

Test the following Quarto document and go straight to the second slide, you'll see the animation.

---
title: "Test"
format: revealjs
---

# {{< animate tada "Scopi del corso" >}} 

text

This being said, since it's pur CSS, there is no way to add a trigger for revealjs without having to use JavaScript and add the trigger which I don't know what it should be: keystroke, mouse click, something else, see the "Usage with Javascript" section of https://animate.style/ (contribution welcome 😉).

You could try to play with the delay option or the repeat option to make a loop, i.e., {{< animate tada "Scopi del corso" duration=2s repeat=infinite >}}.

PS: there is a Font Awesome Quarto extension, see https://github.com/quarto-ext/fontawesome and more general/wide Icon extension, see https://github.com/mcanouil/quarto-iconify.

[mchiapello]

Thank you, I will give a try.

[mcanouil]

I'll just keep this open, if at some point I want to use some of my spare time to learn more about JavaScript and doing this.