Animate atom values over time

[kevinschaich]

Does anyone have examples of tweening / transitioning / animating atom values over time? E.g:

• I have 10 divs who can either be "expanded" (200px wide) or "collapsed" (500px wide)
• I define an atom that expresses their width as a number in pixels
• I click a button to toggle their width

Is there a nice way to abstract that transition away with some utilities to slowly transition it over 1000ms instead of jumping straight from 200 to 500?

I know this can be done in Framer Motion etc. – but I haven't seen it paired with global application state in an example anywhere.

[dai-shi]

useAtom is like useState. useState isn't usually for tweens. But, if your case works with useState, useAtom can do too.