How do I horizontally move text using auto-animate in a revealjs presentation?

[Gautzilla]

Description

I want to make an animation where the text "ABCfooDEF" is transformed to "ABCbarbarDEF", with "DEF" moving right and "foo" being replaced by "barbar" somehow (fading or anything).

I tried specifying which text object was which with the data-id attribute, but I can't seem to make it work:

## test {auto-animate=true}

[ABC]{data-id="abc"}[foo]{data-id="mid"}[DEF]{data-id="def"}

## test {auto-animate=true}

[ABC]{data-id="abc"}[barbar]{data-id="mid"}[DEF]{data-id="def"}

Does anyone know if this is doable? I tried more simple case scenarios where I just add some text before a given word (like "bar" one a slide and "foo bar" on the next one) and couldn't make it work either!

[mcanouil]

If you don't set anything about positions, how Reveal.js would know what to do?

I suggest to read the simple documentation: https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate and for more advanced look at https://revealjs.com/auto-animate/

For example start by modifying one of the examples:

Input

Output

Code --- format: revealjs --- ## {auto-animate=true auto-animate-easing="ease-in-out"} ::: {.r-hstack} ::: {data-id="box1" auto-animate-delay="0" style="background: #2780e3; width: 200px; height: 150px; margin: 10px;"} ::: ::: {data-id="box2" auto-animate-delay="0.1" style="background: #3fb618; width: 200px; height: 150px; margin: 10px;"} ::: ::: {data-id="box3" auto-animate-delay="0.2" style="background: #e83e8c; width: 200px; height: 150px; margin: 10px;"} ::: ::: ## {auto-animate=true auto-animate-easing="ease-in-out"} ::: {.r-hstack} ::: {data-id="box1" style="background: #2780e3; width: 200px; height: 150px; margin: 10px;"} ::: ::: {data-id="box3"style="background: #e83e8c; width: 200px; height: 150px; margin: 10px;"} ::: ::: {data-id="box2" style="background: #3fb618; width: 200px; height: 150px; margin: 10px;"} ::: :::

Screen.Recording.2025-01-29.at.15.48.59.mov

[Gautzilla]

Thanks for the answer.
Since the vertical movements of text is implicit, I assumed the same would have applied for horizontal movement. I'll dive deeper in the revealjs doc you provided. Thanks!

[mcanouil]

Sorry, I clicked too quickly as I was making the example from the documentation.

[mcanouil]

And I don't think Reveal.js supports animating spans.

[Gautzilla]

OK thanks, that was just my take at passing the data-id parameter to my text.
I'm really new toquarto and Reveal.js, I'll have to spend some time on it!