React-motion: why updating style onRest doesn't work?

[lzl124631x]

DEMO on Codepen

Expect: click the cube and it goes to right 300px and then down 300px
Actual: the cube only goes right 300px

I updated the style in function onRest and it successfully sets the style, however Motion doesn't work.

---

BTW, what is the standard way to implement a sequence of tween using react-motion? Something like GSAP TimelineLite

[lzl124631x]

hi there?

[Ahrengot]

hey @lzl124631x I find that React Motion is best suited for animations that react to state changes. ie. smoothly showing or hinding a sidebar navigation, tranisitioning between views when the URL changes and similar things that are tied specifically to the state/props within a given component, where you always have the values avilable that you want to animate between.

Complex sequential stuff, where you have full control over how each animation within the sequence, is something I always rely on GSAP for. IMO it has far a superior API for that kind of stuff (Like the TimelineLite class you mention). GSAP and React Motion are two very different approaches to solving animation. I would say they are almost polar opposites. I love both of them, so this isn't trying to talk down React Motion at all, but in this particular case it seems like GSAP might be the better fit and leave you with simpler, cleaner code.

[lzl124631x]

@Ahrengot Thanks for your comments.

In the first few days with React Motion, it's cool enough to help me achieve some one-step animation during state changes. However, as the project goes on, it's inevitable that I need to make some fancier sequence of animation. I think other devs might stumble into the same situation.

Is it possible to give React Motion the ability to animate a sequence of tween? For example, make the <Motion>'s style attribute accept an array of sub-styles, and React Motion just animate to the first sub-style, and then the 2nd and then ... and the last. In this way a sequence of tween is achieved. What do you think?

[lzl124631x]

BTW, I'm copying the iOS App Clear (demo video) in the purpose of learning React. In the video, swipe-to-right-to-mark-item-as-completed (at 1:07) requires a sequence of tween.

[lzl124631x]

Back to my original question, I think it's a bug of React Motion. Made another try. It still doesn't work demo on codepen

[nkbt]

@lzl124631x you need to delay updating state with setTimeout/requestAnimationFrame.

See https://github.com/nkbt/react-motion-loop/blob/master/src/Component.js#L21-L23

[lzl124631x]

@nkbt Wow! Thanks! It works as long as I wrap requestAnimationFrame around updating state.

Demo on CodePen

[lzl124631x]

@nkbt Can you kindly tell me why delaying updating state with setTimeout/requestAnimationFrame do the trick?

[nkbt]

Not really, maybe something to do with batch updates optimisations, but I
don't know for sure
On Thu., 10 Nov. 2016 at 12:52, 7z7 [email protected] wrote:

@nkbt https://github.com/nkbt Can you kindly tell me why delaying
updating state with setTimeout/requestAnimationFrame do the trick?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/chenglou/react-motion/issues/390#issuecomment-259580118,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAKsoA0Q5MDkoqnlS2kOcY689h6QANIBks5q8ne6gaJpZM4KqOdn
.