Steps

Steps are used to highlight or incrementally reveal individual elements on a slide.
This is what reveal.js calls fragments. Every element with the role fragment will be stepped through before moving on to the next slide.

While you can use the role fragment on any elements, we recommend to use the step option to declare a fragment (see below).
It will ensure better portability and avoid CSS conflicts when using another converter.

Step option

Let’s assume you have an unordered list on one of your slides and you want to reveal the items one-by-one. Declare the step option on the list as follows:

== Topic

[%step]
* this
* is
* revealed
* gradually
At the moment, only fade-in style is supported for lists.

Step style

The default step style is to start out invisible and fade in. This style can be changed by using a different role on the block or inline element.

== Topic

[.highlight-blue%step]
blue

[%step]
white

[.highlight-red%step]
red

Here’s the complete list of the built-in styles:

Name Effect

fade-out

Start visible, fade out

fade-up

Slide up while fading in

fade-down

Slide down while fading in

fade-left

Slide left while fading in

fade-right

Slide right while fading in

fade-in-then-out

Fades in, then out on the next step

fade-in-then-semi-out

Fades in, then to 50% on the next step

grow

Scale up

shrink

Scale down

strike

Strike through

highlight-red

Turn text red

highlight-green

Turn text green

highlight-blue

Turn text blue

highlight-current-red

Turn text red, then back to original on next step

highlight-current-green

Turn text green, then back to original on next step

highlight-current-blue

Turn text blue, then back to original on next step

Step order

By default fragments will be stepped through in the order that they appear in the document. This display order can be changed using the step attribute.

== Topic

[TIP,step=3]
Finally, a pro tip...

[WARNING,step=1]
First, watch out for...

[IMPORTANT.fade-up,step=2]
Second, don't forget...
Multiple elements can appear at the same index.

Text and inline elements

Since it’s not possible to define attributes or options on text and inline elements, you can use the role step.

The [.step.highlight-red]#greatest glory in living# lies not in never falling, but in [.step.highlight-red]#rising every time we fall#.

In the above example, we will highlight in red "greatest glory in living" and then "rising every time we fall".

Limitations and workarounds

Description lists

Currently, the %step option and the step attribute are not supported on description lists. The following will not work:

== Topic

[%step]
Hard drive:: Permanent storage for operating system and/or user files.
RAM:: Temporarily stores information the CPU uses during operation.

Show list items all at once

If you want to reveal list items all at once (i.e., you don’t want to reveal the list items one-by-one), you can wrap a list block in an open block:

== Topic

[%step]
--
.Greek Alphabet
* α
* β
* γ
--

In the above example, the title "Greek Alphabet" and all the list items will be revealed at once.

And here’s a another example where we apply the step option on different elements:

== Topic

[%step]
--
.First
* a
* b
* c
--

[%step]
--
.Second
[%step]
* d
* e
* f
--

Here’s what will happen step by step:

  1. the title "First" and all the list items will be revealed at once

  2. The title "Second" will be revealed

  3. The list items on the "Second" list will be revealed one-by-one

steps lists