Need help for doing sequence of animation for single component

I'm trying to use react-motion to move a component then scale it. But the following code seems to move horizontally back before scaling, does anyone can help for this?

```
const Demo = React.createClass({
getInitialState() {
return {open: false, sequenceId: 0}
},
handleMouseDown() {
this.setState({open: !this.state.open});
},
handleTouchStart(e) {
e.preventDefault();
this.handleMouseDown();
},
getStyles() {
return [
{
ms: {x: spring(this.state.open? 0 : -100)},
ans: '`rotate(${x}deg) translateX(-100px)`'
},
{
ms: {x: spring(this.state.open? 2 : 1)},
ans: '`scale(${x})`'
}
]
},
onRest () {
setTimeout(() => {
this.setState({
sequenceId: this.state.sequenceId + 1
});
}, 0);
},
render () {
// transform: eval(that.getStyles()[that.state.sequenceId].ans)
let that = this
return (

Start by reproducing the Demo component from the issue, focusing on getStyles, onRest, and the Motion render callback. Trace the sequenceId changes and transform expressions to understand the horizontal reversal. Done means the component moves first and scales afterward without the unintended movement back.

Written by the indexing model from the issue text.