7 ms·

React-Move – Animate anything in React

255 points by tannerlinsley 9y ago

gibbitz 9y ago
Eww... animation details in my state? Why?
- tannerlinsley 9y ago
  Keep in mind, this is not a replacement for class css transitions, but stylesheets can only go so far. It may feel a bit funny at first, but it truly opens up new possibilities that were not previously possible with simple css animations. The most obvious being state-dependent dynamic styles. And since you can animate any value you want (not just styles), the applications are only as limited as your imagination! Cheers! :)
- lobster_johnson 9y ago
  Not sure what you're referring to here. React state is UI state. Components are of course visual (the "V" in MVC), and component state is what you use for UI state. So there's no separation of concerns being violated, unless you believe in a strict separation of style and component, which I think is a fallacy. Animation stuff in Redux state would not be as nice.
DenisM 9y ago
Demos are unwatchable on iPhone.
- tannerlinsley 9y ago
  Unfortunately react-storybook is not very mobile friendly. I would suggest using the Codepen demo instead. Here is the full screen link for that: http://codepen.io/tannerlinsley/full/dWYEwd/ http://codepen.io/tannerlinsley/full/dWYEwd/
nperez 9y ago
This benefits highly from spread attributes imo https://pastebin.com/nSFHh0NK https://pastebin.com/nSFHh0NK
dechov 9y ago
Cool— quite similar to one we developed: https://github.com/two-n/join-transition https://github.com/two-n/join-transition This sort of declarative transition comes in handy for us all the time. Two features I don't see yet in React-Move that we find useful is a prop for more precise control over the staggering (orderBy), and custom interpolation (interpolate).
- tannerlinsley 9y ago
  Custom interpolation is on the way, along with custom easing functions. As for the staggering, It would be fairly trivial to add some more customization to the parameters that go into it. Join this slack org and maybe we can chat about it? https://react-chat-signup.herokuapp.com/ https://react-chat-signup.herokuapp.com/
- tannerlinsley 9y ago
  FYI, just added support for custom easing functions. :)
longlho 9y ago
cool library, but the frame rate drop is pretty bad.
- tannerlinsley 9y ago
  We're still working on some edge cases that will result in frames dropped. There will soon be a way to prioritize frame rate over duration precision and visa versa. Stay tuned!
bostonvaulter2 9y ago
Does the 12KB include all the dependencies?
- tannerlinsley 9y ago
  Everything but React :)
untog 9y ago
How does performance compare to CSS transitions? Every animation framework I've tried has been a failure by comparison, even though CSS transitions are a nightmare to work with a lot of the time. (an aside, but boasting about a 12KB minified size for an animation library baffles me. That's huge!)
- derekperkins 9y ago
  If you look at Greensock, the lite version is 28kb and the max version is 113kb, so it's all relative.
- tannerlinsley 9y ago
  You will almost always get better performance with CSS, unless you are using something like GSAP (which actually beats hardware accelerated CSS in some case). There are times though when you need animation to be dynamic, and React can be difficult to use with the more established framework agnostic animation libraries. This is also still a very young project, so I'm sure there are optimizations to be had. At some point, you will always be able to overwhelm the browser thread with too much to animate in under 16ms. I hope to get as close to (or under) that target as React and RAF will allow. As for the size, you may be right compared to standalone animation libraries. I am mostly comparing it to something like React-Motion (30kb I think?)
bhurlow 9y ago
imagining what a non-deterministic animation library would be like :) ...
- tannerlinsley 9y ago
  Hahaha, what can I say, it sounds so nice :)
drcode 9y ago
This looks great, but I still prefer the model of react-motion for most use cases. The main difference between the two is that react-move uses preset durations, whereas react-motion uses a physics model where the durations are dynamic at runtime, directly following from the physics calculations. react-motion: https://github.com/chenglou/react-motion https://github.com/chenglou/react-motion
- derekperkins 9y ago
  They definitely both have their place in the sun. I feel like most of the time, I'm looking for a preset duration, which requires some experimenting in react-motion. The physics are cool, but can be decently imitated with some good easing functions.
  - quadrupleslap 9y ago
    Do you really hate them both that much or did you mean "under the sun"? ;)
    - derekperkins 9y ago
      Hahahaha
chrisco255 9y ago
Will this work for React Native?
- tannerlinsley 9y ago
  You should try and let me know!
- amelius 9y ago
  Perhaps a stupid question but why is there a compatibility gap between React Native and React Browser? As an outsider, I get the impression that React Native is an unfinished product.
  - fermuch 9y ago
    Most of these projects use CSS or the DOM to provide animations, which aren't available on react-native. Usually, all compatibility problems between the two come from that.
    - amelius 9y ago
      Ok, but why doesn't React Native provide a compatibility layer for CSS then?
      - chrisco255 9y ago
        It's just CSS-like syntax for describing styles. They don't claim to be compatible with CSS. But if you already know CSS, it's super intuitive. However, not every CSS property is available.
  - chrisco255 9y ago
    Not at all. React Native renders native elements, so CSS does not exist, just a CSS-like syntax that maps to native styles on Android and iOS. React Native is finished enough to do mature apps in, as Facebook is already using it in production on their mobile app, ads app, Instagram, etc. Other companies using it include Baidu, Tesla, Wal-Mart, AirBnb: https://facebook.github.io/react-native/showcase.html https://facebook.github.io/react-native/showcase.html It's certainly an evolving product and not every native function (such as video recording) is available as an easy-to-use component. In those cases, you can use a 3rd party NPM component or write your own Java/ObjC and link it in with your own custom component. Even if you have to write a little bit of Java/ObjC, it's a huge time saver.
danappelxx 9y ago
I wonder if it would be possible to get "dynamic" (state-dependent) animations such as these but by generating keyframed CSS animations and injecting them into the styles. I'm no guru but I think this would give you the absolute best of both worlds?
- tannerlinsley 9y ago
  That's an interesting idea. Would love to see a proof of concept!
- mikewhy 9y ago
  I think that's similar material-ui is doing in their "next" branch, with jss.
notliketherest 9y ago
How to install? "yarn install ...." God dammit.
- tannerlinsley 9y ago
  uarn add react-move or npm install react-move. Take your pick
nathan_f77 9y ago
['red', 'blue', 'yellow'].find((d, i) => i === Math.round(Math.random() * 2)) That's not a safe way to pick a random color from an array. `Math.round(Math.random() * 2)` might produce the following sequence: 2, 2, 0. The find callback is called with 0, 1, 2, so it returns nothing. Maybe they were going for: ['red', 'blue', 'yellow'][Math.round(Math.random() * 2)] If they intended for `undefined` or `null` to be a valid result, then it would be better to write: ['red', 'blue', 'yellow', null][Math.round(Math.random() * 3)] Haha, I submitted a PR: https://github.com/tannerlinsley/react-move/pull/1 https://github.com/tannerlinsley/react-move/pull/1
- vanderZwan 9y ago
  I suspect you meant to write `Math.floor()` in your second example there? Personally, I just |0 to truncate (still faster in current benchmarks)
  - nathan_f77 9y ago
    Haha oh yeah, `Math.round` was also wrong. Didn't see that one. `|0` is a good trick, I'll have to remember that.
    - uniclaude 9y ago
      |0 also has the benefit of making your code harder to read and look smart. </s> I wouldn't recommend using this unless you're trying to shove milliseconds in this type of operations.
      - JSDave 9y ago
        You're in the wrong place. If anyone was going for readability, it'd just be _.sample(['red', 'blue', 'yellow']). 0 chance of OP's bug, 0 chance of nathan's bug. Understand exactly what's going on as soon as you finish physically reading it.
        9y ago
mlsarecmg 9y ago
I really wonder why Facebooks own react-native-animated, which also works for regular React isn't more popular. It's easily the most simple, efficient and powerful. It does not re-render components, you can pass "native" animated values instead of wrapping stuff into functions. It has support for friction springs, time-based easings, interpolations, gestures and so on. Examples: https://www.webpackbin.com/bins/-KfKys3S2mgEH9UsE8GL https://www.webpackbin.com/bins/-KfKys3S2mgEH9UsE8GL http://react-springy-parallax.surge.sh/ http://react-springy-parallax.surge.sh/ API examples: http://animatedjs.github.io/interactive-docs/ http://animatedjs.github.io/interactive-docs/
- jackielii 9y ago
  I'm definitely using this one for my next project! Thanks for sharing!
- skipants 9y ago
  > I really wonder why Facebooks own react-native-animated, which also works for regular React isn't more popular It seems like it's because there's been zero documentation on it? How am I supposed to find out about this library and that it can be used in regular React? When I search for "react animated" the only official docs I get are https://facebook.github.io/react/docs/animation.html https://facebook.github.io/react/docs/animation.html, which are now deprecated and have no relation to react-native-animated. The official documentation for react-native-animated at https://facebook.github.io/react-native/docs/animated.html https://facebook.github.io/react-native/docs/animated.html don't mention anything about web components (eg. Animated.div) -- they only mention native components: https://facebook.github.io/react-native/docs/animated.html#animatable-components https://facebook.github.io/react-native/docs/animated.html#a... So I guess my questions are: how do I find out about regular, official React libraries like this? And how do I know this isn't an internal library that won't be changed at some point?
  - avtar 9y ago
    "Usage (Still Theoretical)" [1] in the readme doesn't sound like it's currently deemed ready for wide adoption. [1] https://github.com/animatedjs/animated#usage-still-theoretical https://github.com/animatedjs/animated#usage-still-theoretic...
spiderfarmer 9y ago
This demo site / storybook is 4.3 Mb. Not a great demo then.
iamleppert 9y ago
This library is a thin wrapper around d3-interpolate, and looking at the source doesn't appear to provide much (any?) value. Use the d3 stuff directly, or a good tweening library that is well-suited and hardware accelerated for your platform.
- derekperkins 9y ago
  Yes, d3-interpolate does a lot of the heavy lifting, but claiming that react-move doesn't provide any value is clearly untrue. - Animation frame management, skipping frames if the cpu is overloaded - React component API: you may not put value here, but some people find that easier to use, especially given the lifecycle hooks Feel free to wire together your own solution if that works better for you. As for me, react-move is exactly what I need.
- tannerlinsley 9y ago
  That's very sad! React-Move may implement very simple animation "concepts" that you could perform on your own, but there is immense value in the reusable API that React-Move exposes. If you were to utilize d3-interpolate, or a tweening library directly, you would still need to: handle proper react-lifecycle updates, animation-frame batching, detect when to reanimate, provide a deterministic and reusable api that promotes good composition, support as much of the ecosystem as possible, and at the same time keep dependencies and component footprint as small as possible. React-Move provides all of these things in a battle tested package that, given its rapid growth, has already proved its suitability for the majority use-case and general animation needs of React users. On the topic of hardware acceleration, there are a some good perks to using class-based/keyframe CSS animation, but you immediately forfeit any ability to utilize dynamic run-time values. It's also important to note that even though React-Move's animation loop is being executed in Javascript instead of the browser's GPU thread, doesn't mean React-Move doesn't utilize hardware acceleration. By mapping these interpolated values to hardware-accelerated css properties, you are in fact using hardware-accelerated transitions, albeit at the speed of the JS thread. If all of these amazing features aren't your cup of tea, then I would most definitely suggest that you roll your own solution. :) Cheers!

255 points by tannerlinsley 9y ago

gibbitz 9y ago

Eww... animation details in my state? Why?

tannerlinsley 9y ago
Keep in mind, this is not a replacement for class css transitions, but stylesheets can only go so far. It may feel a bit funny at first, but it truly opens up new possibilities that were not previously possible with simple css animations. The most obvious being state-dependent dynamic styles. And since you can animate any value you want (not just styles), the applications are only as limited as your imagination! Cheers! :)
lobster_johnson 9y ago
Not sure what you're referring to here. React state is UI state. Components are of course visual (the "V" in MVC), and component state is what you use for UI state. So there's no separation of concerns being violated, unless you believe in a strict separation of style and component, which I think is a fallacy. Animation stuff in Redux state would not be as nice.

DenisM 9y ago

Demos are unwatchable on iPhone.

tannerlinsley 9y ago
Unfortunately react-storybook is not very mobile friendly. I would suggest using the Codepen demo instead. Here is the full screen link for that: http://codepen.io/tannerlinsley/full/dWYEwd/ http://codepen.io/tannerlinsley/full/dWYEwd/

nperez 9y ago

This benefits highly from spread attributes imo https://pastebin.com/nSFHh0NK https://pastebin.com/nSFHh0NK

dechov 9y ago

Cool— quite similar to one we developed: https://github.com/two-n/join-transition https://github.com/two-n/join-transition This sort of declarative transition comes in handy for us all the time. Two features I don't see yet in React-Move that we find useful is a prop for more precise control over the staggering (orderBy), and custom interpolation (interpolate).

tannerlinsley 9y ago
Custom interpolation is on the way, along with custom easing functions. As for the staggering, It would be fairly trivial to add some more customization to the parameters that go into it. Join this slack org and maybe we can chat about it? https://react-chat-signup.herokuapp.com/ https://react-chat-signup.herokuapp.com/
tannerlinsley 9y ago
FYI, just added support for custom easing functions. :)

longlho 9y ago

cool library, but the frame rate drop is pretty bad.

tannerlinsley 9y ago
We're still working on some edge cases that will result in frames dropped. There will soon be a way to prioritize frame rate over duration precision and visa versa. Stay tuned!

bostonvaulter2 9y ago

Does the 12KB include all the dependencies?

tannerlinsley 9y ago
Everything but React :)

untog 9y ago

How does performance compare to CSS transitions? Every animation framework I've tried has been a failure by comparison, even though CSS transitions are a nightmare to work with a lot of the time. (an aside, but boasting about a 12KB minified size for an animation library baffles me. That's huge!)

derekperkins 9y ago
If you look at Greensock, the lite version is 28kb and the max version is 113kb, so it's all relative.
tannerlinsley 9y ago
You will almost always get better performance with CSS, unless you are using something like GSAP (which actually beats hardware accelerated CSS in some case). There are times though when you need animation to be dynamic, and React can be difficult to use with the more established framework agnostic animation libraries. This is also still a very young project, so I'm sure there are optimizations to be had. At some point, you will always be able to overwhelm the browser thread with too much to animate in under 16ms. I hope to get as close to (or under) that target as React and RAF will allow. As for the size, you may be right compared to standalone animation libraries. I am mostly comparing it to something like React-Motion (30kb I think?)

bhurlow 9y ago

imagining what a non-deterministic animation library would be like :) ...

tannerlinsley 9y ago
Hahaha, what can I say, it sounds so nice :)

drcode 9y ago

This looks great, but I still prefer the model of react-motion for most use cases. The main difference between the two is that react-move uses preset durations, whereas react-motion uses a physics model where the durations are dynamic at runtime, directly following from the physics calculations. react-motion: https://github.com/chenglou/react-motion https://github.com/chenglou/react-motion

derekperkins 9y ago
They definitely both have their place in the sun. I feel like most of the time, I'm looking for a preset duration, which requires some experimenting in react-motion. The physics are cool, but can be decently imitated with some good easing functions.
- quadrupleslap 9y ago
  Do you really hate them both that much or did you mean "under the sun"? ;)
  - derekperkins 9y ago
    Hahahaha

chrisco255 9y ago

Will this work for React Native?

tannerlinsley 9y ago
You should try and let me know!
amelius 9y ago
Perhaps a stupid question but why is there a compatibility gap between React Native and React Browser? As an outsider, I get the impression that React Native is an unfinished product.
- fermuch 9y ago
  Most of these projects use CSS or the DOM to provide animations, which aren't available on react-native. Usually, all compatibility problems between the two come from that.
  - amelius 9y ago
    Ok, but why doesn't React Native provide a compatibility layer for CSS then?
    - chrisco255 9y ago
      It's just CSS-like syntax for describing styles. They don't claim to be compatible with CSS. But if you already know CSS, it's super intuitive. However, not every CSS property is available.
- chrisco255 9y ago
  Not at all. React Native renders native elements, so CSS does not exist, just a CSS-like syntax that maps to native styles on Android and iOS. React Native is finished enough to do mature apps in, as Facebook is already using it in production on their mobile app, ads app, Instagram, etc. Other companies using it include Baidu, Tesla, Wal-Mart, AirBnb: https://facebook.github.io/react-native/showcase.html https://facebook.github.io/react-native/showcase.html It's certainly an evolving product and not every native function (such as video recording) is available as an easy-to-use component. In those cases, you can use a 3rd party NPM component or write your own Java/ObjC and link it in with your own custom component. Even if you have to write a little bit of Java/ObjC, it's a huge time saver.

danappelxx 9y ago

I wonder if it would be possible to get "dynamic" (state-dependent) animations such as these but by generating keyframed CSS animations and injecting them into the styles. I'm no guru but I think this would give you the absolute best of both worlds?

tannerlinsley 9y ago
That's an interesting idea. Would love to see a proof of concept!
mikewhy 9y ago
I think that's similar material-ui is doing in their "next" branch, with jss.

notliketherest 9y ago

How to install? "yarn install ...." God dammit.

tannerlinsley 9y ago
uarn add react-move or npm install react-move. Take your pick

nathan_f77 9y ago

['red', 'blue', 'yellow'].find((d, i) => i === Math.round(Math.random() * 2)) That's not a safe way to pick a random color from an array. `Math.round(Math.random() * 2)` might produce the following sequence: 2, 2, 0. The find callback is called with 0, 1, 2, so it returns nothing. Maybe they were going for: ['red', 'blue', 'yellow'][Math.round(Math.random() * 2)] If they intended for `undefined` or `null` to be a valid result, then it would be better to write: ['red', 'blue', 'yellow', null][Math.round(Math.random() * 3)] Haha, I submitted a PR: https://github.com/tannerlinsley/react-move/pull/1 https://github.com/tannerlinsley/react-move/pull/1

vanderZwan 9y ago
I suspect you meant to write `Math.floor()` in your second example there? Personally, I just |0 to truncate (still faster in current benchmarks)
- nathan_f77 9y ago
  Haha oh yeah, `Math.round` was also wrong. Didn't see that one. `|0` is a good trick, I'll have to remember that.
  - uniclaude 9y ago
    |0 also has the benefit of making your code harder to read and look smart. </s> I wouldn't recommend using this unless you're trying to shove milliseconds in this type of operations.
    - JSDave 9y ago
      You're in the wrong place. If anyone was going for readability, it'd just be _.sample(['red', 'blue', 'yellow']). 0 chance of OP's bug, 0 chance of nathan's bug. Understand exactly what's going on as soon as you finish physically reading it.
      - 9y ago

mlsarecmg 9y ago

I really wonder why Facebooks own react-native-animated, which also works for regular React isn't more popular. It's easily the most simple, efficient and powerful. It does not re-render components, you can pass "native" animated values instead of wrapping stuff into functions. It has support for friction springs, time-based easings, interpolations, gestures and so on. Examples: https://www.webpackbin.com/bins/-KfKys3S2mgEH9UsE8GL https://www.webpackbin.com/bins/-KfKys3S2mgEH9UsE8GL http://react-springy-parallax.surge.sh/ http://react-springy-parallax.surge.sh/ API examples: http://animatedjs.github.io/interactive-docs/ http://animatedjs.github.io/interactive-docs/

jackielii 9y ago
I'm definitely using this one for my next project! Thanks for sharing!
skipants 9y ago
> I really wonder why Facebooks own react-native-animated, which also works for regular React isn't more popular It seems like it's because there's been zero documentation on it? How am I supposed to find out about this library and that it can be used in regular React? When I search for "react animated" the only official docs I get are https://facebook.github.io/react/docs/animation.html https://facebook.github.io/react/docs/animation.html, which are now deprecated and have no relation to react-native-animated. The official documentation for react-native-animated at https://facebook.github.io/react-native/docs/animated.html https://facebook.github.io/react-native/docs/animated.html don't mention anything about web components (eg. Animated.div) -- they only mention native components: https://facebook.github.io/react-native/docs/animated.html#animatable-components https://facebook.github.io/react-native/docs/animated.html#a... So I guess my questions are: how do I find out about regular, official React libraries like this? And how do I know this isn't an internal library that won't be changed at some point?
- avtar 9y ago
  "Usage (Still Theoretical)" [1] in the readme doesn't sound like it's currently deemed ready for wide adoption. [1] https://github.com/animatedjs/animated#usage-still-theoretical https://github.com/animatedjs/animated#usage-still-theoretic...

spiderfarmer 9y ago

This demo site / storybook is 4.3 Mb. Not a great demo then.

iamleppert 9y ago

This library is a thin wrapper around d3-interpolate, and looking at the source doesn't appear to provide much (any?) value. Use the d3 stuff directly, or a good tweening library that is well-suited and hardware accelerated for your platform.

derekperkins 9y ago
Yes, d3-interpolate does a lot of the heavy lifting, but claiming that react-move doesn't provide any value is clearly untrue. - Animation frame management, skipping frames if the cpu is overloaded - React component API: you may not put value here, but some people find that easier to use, especially given the lifecycle hooks Feel free to wire together your own solution if that works better for you. As for me, react-move is exactly what I need.
tannerlinsley 9y ago
That's very sad! React-Move may implement very simple animation "concepts" that you could perform on your own, but there is immense value in the reusable API that React-Move exposes. If you were to utilize d3-interpolate, or a tweening library directly, you would still need to: handle proper react-lifecycle updates, animation-frame batching, detect when to reanimate, provide a deterministic and reusable api that promotes good composition, support as much of the ecosystem as possible, and at the same time keep dependencies and component footprint as small as possible. React-Move provides all of these things in a battle tested package that, given its rapid growth, has already proved its suitability for the majority use-case and general animation needs of React users. On the topic of hardware acceleration, there are a some good perks to using class-based/keyframe CSS animation, but you immediately forfeit any ability to utilize dynamic run-time values. It's also important to note that even though React-Move's animation loop is being executed in Javascript instead of the browser's GPU thread, doesn't mean React-Move doesn't utilize hardware acceleration. By mapping these interpolated values to hardware-accelerated css properties, you are in fact using hardware-accelerated transitions, albeit at the speed of the JS thread. If all of these amazing features aren't your cup of tea, then I would most definitely suggest that you roll your own solution. :) Cheers!