gistfile1.txt

type animatable('t) =
  | AtRest('t)
  | BetweenFrames({pre: 't, post: 't, info: animationInfo})

type state = {
  expanded: animatable(bool),
  disabled: animatable(bool)
}

type action =
  | Expand
  | Collapse
  | Disable
  | Enable;

createComponent({
  initialState: () => {
    expanded: BetweenFrames(false, true, timingAnimation(~duration=300)),
    disabled: AtRest(false)
  },
  transition: (state, action) => switch action {
    | ({expanded: AtRest(false)}, Expand) => {...state, expanded: BetweenFrames(false, true, timingAnimation(~duration=300))}
    | ({expanded: AtRest(true)}, Expand) => state
    | ({expanded: AtRest(true)}, Collapse) => {...state, expanded: BetweenFrames(true, false, timingAnimation(~duration=300))}
  },
  render: (state) => {
    <div height=(switch (state.expanded) {
      | BetweenFrames(pre, pos, animation) => interpolate(animation) * 50
      | AtRest(true) => 50
      | AtRest(false) => 10
    })>
      Hello
    </div>
  }
})