Add Fade In and Out of an Elements Linked / Synched to Appearance of An Item in {.incremental} List

[RoyiAvital]

I have a slide like:

## Some Title

::: {.incremental}
- Item 1.
- Item 2.
- Item 3.
:::

::: {.fragment .fade-in-then-out fragment-index=2}
![](https://i.imgur.com/cGp9J5C.png){.absolute bottom=0 right=50}
:::

I want the image to appear with Item 2 and disappear with Item 3.
I added a fragment index, yet it didn't work.

Any idea how to sync the appearance of an element with an element in a list?

[mcanouil]

Off topic: Please don't ping especially on unrelated issues/discussions.
To note, I am helping here on my spare time, even if I enjoy play around with Quarto and help, I still have a job and a life.

This being said, I do not think you can achieve what you want to do without diving into more advanced HTML/CSS/JavaScript methods, but maybe Quarto team members have a way or can confirm my suspicion.

[RoyiAvital]

Maybe a solution would be adding a parameter to the .incremental code?

Something like:

::: {.incremental fragment-indices=[2, 3, 4]}
- Item 1.
- Item 2.
- Item 3.
:::

Could the be done?

[cderv]

Not ideal but you can do this currently

---
format: revealjs
---

## Some Title

- [Item 1.]{.fragment fragment-index=1}
- [Item 2.]{.fragment fragment-index=2}
- [Item 3.]{.fragment fragment-index=3}

::: {.fragment .fade-in-then-out fragment-index=2}
![](https://i.imgur.com/cGp9J5C.png){.absolute top=200 right=0 width="350" height="200"}
:::

Maybe a Lua filter could transform your syntax to this above.

[RoyiAvital]

@cderv , Indeed, this is the current solution I use.
Yet visually it is not appealing.

It would be much nicer to have some control on the .incremental indexing.

Would a Lua filter be able to achieve control on the indexing of .incremental?

[cderv]

The end the .incremental is done by Pandoc https://pandoc.org/MANUAL.html#incremental-lists
It will be transformed by Pandoc to a fragment feature for revealjs, by the HTML.hs writer.

You could maybe catched incremental class on the Div and replace with something else to write more precisely as RevealJS expect.