Scroll Snap

SketchSystems.spec

Scroll Snap
  start scrolling -> Scrolling

  # No motion
  Rest
  
  # Actively using the scroll mechanism
  Scrolling
    scrolled past threshold -> Yield
    stopped scrolling -> Elastic

  # Resisting scrolling away
  Elastic
    arrived at starting snap point -> Rest
    
  # Going to the next snap
  Yield
    arrived at next snap point -> Rest
      
    

SketchSystems_prototype.js

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