
React-Move – Animate anything in React - tannerlinsley
https://github.com/tannerlinsley/react-move
======
mlsarecmg
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/)

~~~
skipants
> 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#a...](https://facebook.github.io/react-
native/docs/animated.html#animatable-components)

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
"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-
theoretic...](https://github.com/animatedjs/animated#usage-still-theoretical)

------
nathan_f77

        ['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
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
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
|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
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.

~~~
beaconstudios
> when the senior developer does the code review

------
drcode
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
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
Do you really hate them both _that_ much or did you mean "under the sun"? ;)

~~~
derekperkins
Hahahaha

------
dechov
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
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/)

------
untog
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!)

~~~
tannerlinsley
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?)

------
danappelxx
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?

~~~
mikewhy
I think that's similar material-ui is doing in their "next" branch, with jss.

------
iamleppert
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.

~~~
tannerlinsley
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!

------
chrisco255
Will this work for React Native?

~~~
amelius
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
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
Ok, but why doesn't React Native provide a compatibility layer for CSS then?

~~~
chrisco255
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.

------
DenisM
Demos are unwatchable on iPhone.

~~~
tannerlinsley
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
This benefits highly from spread attributes imo
[https://pastebin.com/nSFHh0NK](https://pastebin.com/nSFHh0NK)

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

~~~
tannerlinsley
Hahaha, what can I say, it sounds so nice :)

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

~~~
tannerlinsley
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
Does the 12KB include all the dependencies?

~~~
tannerlinsley
Everything but React :)

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

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

~~~
lobster_johnson
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.

------
notliketherest
How to install? "yarn install ...."

God dammit.

~~~
tannerlinsley
uarn add react-move or npm install react-move. Take your pick

