[Revealjs] Define new fragment : fade-semi-out-then-in

[fbob]

I would like to define and use in quarto a new fragment style "fade-semi-out-then-in" i.e text is at first blurred then appear clearly.

From https://revealjs.com/fragments/ it looks like it's possible to define new fragment style with somme css :

So I add this to my css config :

.fragment.blur {
    filter: blur(5px);
  }
  .fragment.blur.visible {
    filter: none;

And I've tried to use it with either :

::: {.fragment .blur}
Test a new fragment syle
:::

or

::: {.fragment .custom.blur}
Test a new fragment syle
:::

But none of them work.
Any idea ?

Thanks !

[cderv]

It seems this feature is there since a long time (hakimel/reveal.js#2927) but documented fairly recently (reveal/revealjs.com#50) and the custom class support was indeed last week (hakimel/reveal.js@006b348 and hakimel/reveal.js#2927 (comment)) with some other tweaks.

The revealjs version inside Quarto is not up to date to this recent change as document in their doc. You should be able to use it the "old way" as explained in hakimel/reveal.js#2927 (comment)

Try this

---
title: "My document"
format: 
  revealjs:
    theme: [default, styles.scss]
---

::: {.fragment .blur}
Test a new fragment syle
:::

with styles.scss being

/*-- scss:defaults --*/

/*-- scss:rules --*/

.reveal .slides section .fragment.blur {

  filter: blur(5px);

  &.visible {
    filter: none;
  }
}

We'll update revealjs in 1.4 probably and be sure to add a document this new feature

[cderv]

Quarto 1.6 pre-release is now updated with latest revealjs, and custom fragments can be used.

https://prerelease.quarto.org/docs/presentations/revealjs/advanced.html#custom-fragments

[fbob]

Thanks your very much @cderv for your very helpful and complete answer 👍

I've tried your suggestions: it's way better but not quite yet the desired behavior.
The text is at first invisible then blurred.

It's great to see that the revealjs version will be upgraded, hopefully it will work as intended.
Many thanks for your kind and helpful answer !