Summary
Extremely simple state-based animation
Using a TargetWrapper for any property's getter/setter, we can delay the resolution of the object to that display state.
Because this is not true animation - objects always simply approach their target state - it is not only very simple, but it effortlessly handles situations where regular timing-based animation get tricky (state changing before animation is complete).
Once set, objects can be updated based on stateful calculations.
Implementation
This is implemented in two ways:
-
This implementation is defining a react Hook: and exports
useTarget
, only depending on react for state management, -
The second implementation depends on
mobx
for state management, and is more tailored to our internal setup.
installation
yarn add @strategies/target-animate
example usage
TBD
undocumented example usage:
https://misc-tools.s3.amazonaws.com/testbed/prioritizer-3-poc/index.html
http://misc-tools.s3-website-us-east-1.amazonaws.com/testbed/prioritizer-3-poc
License
MIT