4 ms·
I wish non-css animations were easier! If you have any animation where you want to tween the state yourself (say changing position as a function of time), then
by zawerf 8y ago
I wish non-css animations were easier!
If you have any animation where you want to tween the state yourself (say changing position as a function of time), then that requires updating the state at 60fps or whatever requestAnimationFrame goes at.
It feels philosophically wrong to do that under the declarative paradigm of react. React is supposed to be responsible for taking the state and "transitioning"(or diffing) the dom to the new state. By doing the tweening myself, it feels like I am polluting the state with a lot of transient junk (like current progress time, start/end keyframe states, entering/exiting elements, etc). This is especially bad if you want to be a redux purist and throw all my state into a global state! But at the same time I don't know where else I can put it.
I've completely avoided doing anything more complicated than a CSS transition since coming to react (long ago, which also means there could be better 3rd party libraries that solves this problem now that I don't know of). But is there a better way to make this work out of the box?
- baddox 8y agoIt may feel excessive to rerender an animating component every animation frame, but in practice it’s generally “fast enough” and I find the declarative programming model very nice to grasp mentally. Regarding the handling of timers, easing functions, etc., that does need to be handled somewhere, but it can be “componentized” so that you can reuse animation logic via a friendly component API without worrying about the underlying bookkeeping. You’ll have to learn and get used to that API, but when you find one that works for you it can be great. Two popular such libraries for React are react-spring and Pose: http://react-spring.surge.sh/spring http://react-spring.surge.sh/spring https://popmotion.io/pose/learn/popmotion-get-started/ https://popmotion.io/pose/learn/popmotion-get-started/
- jwalton 8y agoThis is a library that I've used before to handle some complicated animation: https://github.com/joshwcomeau/react-flip-move https://github.com/joshwcomeau/react-flip-move No longer actively maintained, though, so you might want to check out https://github.com/aholachek/react-flip-toolkit https://github.com/aholachek/react-flip-toolkit instead.