You can see bespoke-substeps in action in e.g. Asynchronous JavaScript Interfaces presentation

• Order of display can be customized (via data-order attribute), so it doesn't necessary need to follow order in document

• Separated steps can be configured to appear in parallel (just apply same data-order value)

• There are four types of actions (configured via data-action attribute) that can be used:

  • activate (default) show element (turn off visibility: hidden)
  • deactivate hide element (turn on visibility: hidden)
  • insert insert element (turn off display: none)
  • remove remove element (turn on display: none)
  • mark mark element (just for duration of given step turn off background: inherit)

  How it works: step remains in opposite state to configured action until it has it's turn. Anytime later configured action is in effect, just in case of mark action, configure state is maintained only for time of given step.

If CJS bundler you're using, supports CSS modules out of a box, then just do:

var substeps = require('bespoke-substeps');

Otherwise require strictly JS logic of plugin with

var substeps = require('bespoke-substeps/dom');

and manually assure that styles placed in style.css are also loaded with your application.

Then configure bespoke to use the plugin:

bespoke.from(selector, [
  substeps()
]);

Example HTML configuration

All step elements need to share substep class. Unless overridden they're assigned with activate action and incremented order.

<section class="bespoke-slide">
  <h1>Slide title</h1>
  <ul class="substep" data-order="3" data-action="remove"><!-- Removed in final step -->
    <li class="substep">First step</li><!-- assigned  order: 0.01 -->
    <li class="substep">Second step</li><!-- assigned order: 0.02 -->
    <li class="substep" data-order="2">Fourth step (1)</p><!-- assigned  order: 2 -->
    <li class="substep" data-order="1">Third step</p><!-- assigned  order: 1 -->
    <li class="substep" data-order="2">Fourth step (2)</p><!-- assigned  order: 2 -->
    <li class="substep">Fifth step</p><!-- assigned  order: 2.01 -->
  </ul>
  <ul class="substep" data-order="3" data-action="insert"><!-- Inserted in final step -->
    <li>Final only item</li>
  </ul>
</section>

In your presentation path:

$ npm install bespoke-substeps