Allow multi-step slides

[mirisuzanne]

Presentation tools often allow multiple-step slides, to reveal additional content, or do some other animation. Ideally this would work with the same 'next/previous' triggers that navigate slides, so that it would work with a simple remote clicker.

I could imagine either storing this information as an attribute on the slide element:

<slide-item id="slide-3" data-internal-steps="2">…</slide-item>

Or auto-generating that count based on attributes inside a slide:

<slide-item id="slide-3">
  <ul>
  <li>visible by default</li>
  <li data-step="1">revealed on first internal 'next'</li>
  <li data-step="2">revealed on second 'next'</li>
  </ul>
</slide-item>

We could keep state in the URL with a query parameter. I expect that moving forward takes you through each step of each slide, but moving backwards…

• If there are previous steps on the current slide, reverse through those steps
• Otherwise, go to the previous slide (initial state, not final step)

[eeeps]

Not sure this is at all helpful to share??? But here's what I do???

Went super-general; each slide has an optional array of "events" (objects with do and undo keys, in an ordered array), which trigger on keypress. 90% of the time I'm just display:blocking on do and display:noneing on undo, but for that other 10%, I suffer through the repetition.

I wish the intermediate states had URLs!

• Framework code
• Example usage

[mirisuzanne]

@eeeps Thanks, that's interesting! As much as possible I'm trying to start from declarative HTML syntax, and then provide a JS API on top of that, as needed.

I'm thinking the most flexible HTML-first approach is a combination:

• step-count attribute on slide doesn't do anything except change some other attribute, so I can write my own CSS based on the current step
• on-step attribute can be used internally to trigger predefined animations on specific steps? Things like fade-in, fade-out, etc.
• Maybe there's a JS object generated from that, which can be manipulated directly for other actions…?