Some help with a (seemingly) simple animation

[robpetrosino]

Description

I am trying to make a seemingly simple animation in Quarto with reveal.js, but I can't seem to make it work. Basically I need three different strings (X - Y - Z) at the center of the slide replacing one another and lasting specific duration each. Here's my attempt:

## {auto-animate=true}

:::{.r-hstack}
::: {data-id="1" style="text-align: center" auto-animate-duration="0.5"}
\#\#\#\#\#\#\#
:::
:::

## {auto-animate=true}

:::{.r-hstack}
::: {data-id="1" style="text-align: center" auto-animate-duration="0.03"}
driver
:::
:::

## {auto-animate=true}

:::{.r-hstack}
::: {data-id="1" style="text-align: center"}
DRIVE
:::
:::

This computes three different slides, but the durations do not seem to properly work and there is some stretch effect I don't want. Can anyone help with this?

[mcanouil]

Keep it simple. here you add elements that are not needed which actually break everything.

---
title: "Quarto Playground"
format: revealjs
---

## {auto-animate=true}

::: {.r-stack}
::: {data-id="1" auto-animate-duration="0.5"}
\#\#\#\#\#\#\#
:::
:::

## {auto-animate=true}

::: {.r-stack}
::: {data-id="1" auto-animate-duration="0.03"}
driver
:::
:::

## {auto-animate=true}

::: {.r-stack}
::: {data-id="1"}
DRIVE
:::
:::

[robpetrosino]

Your example does not work on my end. Is there something in my preamble that breaks it?

---
title: "title"
subtitle: "subtitle"
author: "roberto"
institute: "universityi"
bibliography: references.bib
format: 
  revealjs:
    theme: simple
    logo: logo.jpg
    footer: "here"
    slide-number: c/t
    cap-location: bottom
    #toc: true
    smaller: true
    scrollable: true
    execute:
      echo: false
      warning: false
---

##  {auto-animate=true}

::: {.r-hstack}
::: {data-id="1" auto-animate-duration="0.5"}
\#\#\#\#\#\#\#
:::
:::

##  {auto-animate=true}

::: {.r-hstack}
::: {data-id="1" auto-animate-duration="0.03"}
driver
:::
:::

##  {auto-animate=true}

::: {.r-hstack}
::: {data-id="1"}
DRIVE
:::
:::

Also -- the style="text-align: center" definition in my code was my attempt to make the text appear horizontally and vertically centered. Any alternative idea of how to accomplish this?

[mcanouil]

I have to admit that I don't see much issue and the HTML seems correct in accordance to Reveal.js (https://revealjs.com/auto-animate/).

Maybe @cderv can help.