Guided Draft

SketchSystems.spec

Guided Draft
  Example Closed
    Never Saw Example
      open example -> Example Opening
    Saw Example
      open example -> Example Open At Previous Scroll Position
  Example Opening
    finish scrolling animation -> Example Open At Previous Scroll Position
  Example Open At Previous Scroll Position
    close example -> Saw Example

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}