Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment