Reveal.js make fade-in-then-semi-out the default list action

[tylerjarvis]

In order to help my audience focus on what's most important on a slide, I like to make list items appear one at a time and then semi-fade-out when they are no longer the main item. I can do this explicitly by

## What is Math

::: {.fragment .fade-in-then-semi-out}
Patterns
:::
::: {.fragment .fade-in-then-semi-out}
Truth
:::
::: {.fragment .fade-in-then-semi-out}
Beauty
::: 

But that's a lot of typing, which defeats the point of markdown. I'd like to figure out how to set something in an scss file to make this the default list behavior so that all I have to type is

## What is Math
- Patterns
- Truth
- Beauty

Is that possible? How could I do that?

[cscheid]

That won't work with SCSS because the .fragment declaration is in a div, which produces a different structure on your slideshow; the revealjs format needs information about which parts you're choosing to display the information. A rough way to think about this is that SCSS controls the appearance of the markdown. To control behavior, you need to change the markdown.

However, there are ways to write code that will change the markdown for you, hence saving on typing. One alternative is to create a Lua filter that picks the itemized lists you want and inserts the fragment classes as desired. Like this:

autofade.lua

function BulletList(node)
    local result = pandoc.Div(node.content:map(function(blocks)
        -- apparently revealjs uses inline-block for lists, so we wrap them
        -- in a div to make them block
        local div = pandoc.Div({pandoc.BulletList(blocks)})
        div.attr = pandoc.Attr("", {"fragment", "fade-in-then-semi-out"})
        return div
    end))
    return result
end

test.qmd

---
title: autolist test
format: revealjs
filters: 
  - autofade.lua
---

## Slide 1

- Item 1
- Item 2
- Item 3

## Slide 2

- Item 1
- Item 2
- Item 3

You'll note that the spacing now doesn't quite match before: the reason is that I had to wrap each bullet list in its own div, which changes the margins. If you want to fix that, then that is a perfect use for CSS: just add the class to the div you create in that filter (next to "fragment" etc) and then add the CSS to your front matter.

[tylerjarvis]

Thank you! I get a better result if the individual elements of the list are just treated as plain text rather than made into individual lists. So my edited version of your filter looks like

function BulletList(node)
    local result = pandoc.Div(node.content:map(function(blocks)
        -- apparently revealjs uses inline-block for lists, so we wrap them
        -- in a div to make them block
        local div = pandoc.Div(blocks)
        div.attr = pandoc.Attr("", {"fragment", "fade-in-then-semi-out"})
        return div
    end))
    return result
end