Synchronizing incremental list and fragment images ?

[ValentinGilet]

Description

Hi,
I've just started using Quarto to create a slide presentation.
I'm currently facing a problem: I want to synchronize elements from an incremental list and images that I put under the list.
For the example that I share below, I want the 5th line to appear at the same time as the two images, and the 6th line appears at the same moment as the second image fades out somehow.

Thank you in advance

---
title: Test
author: Test
date: 2025/08/22
lang: fr
date-format: long
format:
  revealjs:
    footer: "Test"
    theme: simple
    transition: slide
    transition-speed: fast
    width: 1920
    height: 1080
    code-block-height: 2000px
    incremental: true
    auto-stretch: false
slide-level: 2
number-sections: true
number-depth: 2
toc: true
---

# Introduction
## Microspectroscopie Raman {auto-animate="true"}

::: {.incremental}

- Technique spectroscopique permettant d'analyser :
  - la composition chimique
  - la structure moléculaire
- S'appuie sur la diffusion inélastique de la lumière : l'effet **Raman**
  - mis en évidence par les physiciens indiens C. V. Raman et K. S. Krishnan
  - prix Nobel de physique en 1930 (C. V. Raman)

:::

::: {layout-ncol="2" .caption .fragment}
![C.V. Raman](images/CV_Raman.jpg){height=400}

![K.S. Krishnan](images/ks_krishnan.png){height=400}
:::

[mcanouil]

You need fragment-index attribute. See the advanced Reveal.js documentation.

But, as .incremental automatically generates the index for the list based on already defined index, I believe you need to use JavaScript or hack your way around.

---
format: revealjs
---

## slide

::: {layout-ncol="2"}

- [Technique spectroscopique permettant d'analyser :]{.fragment fragment-index="1"}
  - [la composition chimique]{.fragment fragment-index="2"}
  - [la structure moléculaire]{.fragment fragment-index="3"}

[{{< placeholder 600 400 >}}]{.fragment fragment-index="2"}
:::

[mcanouil]

Here is the whole hack:

---
format:
  revealjs:
    include-in-header:
      - text: |
          <style>
            /* Hide original markers if .fragment only */
            .reveal ul li:has(.fragment)::marker,
            .reveal ol li:has(.fragment)::marker {
              color: transparent;
              transition: color 0.3s ease;
            }

            /* Show markers when list item or its fragments are visible */
            .reveal li.visible::marker,
            .reveal li.fragment.visible::marker,
            .reveal li:has(.fragment.visible)::marker {
              color: inherit;
            }
          </style>
---

## slide

::: {layout-ncol="2"}

- [Technique spectroscopique permettant d'analyser :]{.fragment fragment-index="1"}
  - [la composition chimique]{.fragment fragment-index="2"}
  - [la structure moléculaire]{.fragment fragment-index="3"}

[{{< placeholder 600 400 >}}]{.fragment fragment-index="2"}
:::

[ValentinGilet]

Thank you. I've just tried with your code, but a bug occurs: the placeholder appears before the first element of the list...

[mcanouil]

It works perfectly on my side. The placeholder appear at the second keystroke.

Be sure to fully render and to use the latest stable version of Quarto CLI.
Also, be sure to use exactly my example as is.
If you have other parameters that conflict, you'll have to figure out yourself how to deal with that by looking at the documentation for workaround.

[ValentinGilet]

I finally figured it out, thank you for the workaround ;-).

[mcanouil]

Here is "fragment ion": https://github.com/mcanouil/quarto-revealjs-fragmention: