React-motion: How do you cancel and reverse an animation?

[AlastairTaft]

I've been reading as much documentation as I can find on react-motion (documentation on this seems sparse) but I'm unable to figure this one out. I found a tutorial on medium that manages to do it, except they are using a StaggeredMotion, I can't find any documentation that says the same is possible with just a Motion component, looks like they take different props?

In the end I went with the native Web Animations api, even though it's not complete yet and I think only a few browsers support it. I'd much prefer to use react-motion but not being able to cancel and reverse an animation is really important imo. Trying to animate between pages and the user may interrupt that navigation, would rather have no animation than clunky animation.

[nkbt]

You do not cancel and start, you just set new "target" styles and Motion will move over there.

[nkbt]

So basically half-way there you set your styles to go back to 0 or something...

Sort of:

<Motion styles={{height: this.state.isCollapsed ? 0 : 200}}>
// ...

[AlastairTaft]

Oh that's really clean I like it, thanks I will give it a try

[AlastairTaft]

Does that work with the springs?

EDIT: Checked and works