ease animation from right end of the screen

[sruthisripathi]

I wrote this using react-smooth which kind of works like a collapsible sidebar on the left

import React, { Component } from 'react';
import Animate from 'react-smooth';

class SimpleAnime extends Component {
  constructor(props) {
    super(props);

    this.state = {
      from : -400,
      to: -400
    };
  }

  handleClick() {
    if(this.state.to == this.state.from) {
      this.setState({
        from: -400,
        to: -5
      });
    }
    else {
      this.setState({
        from: this.state.to,
        to: this.state.from
      });
    }
  }

  render() {
    return (
      <div className="simple">
        <button onClick={this.handleClick.bind(this)}>click me!</button>
        <Animate from={{ x: this.state.from }} to={{ x: this.state.to }}>
          {({ x }) => (
            <div
              style={{
                width: 300,
                height: 800,
                backgroundColor: 'green',
                transform: `translate(${x}px, 0)`,
              }}
            >
            </div>
          )}
        </Animate>
      </div>
    );
  }
}

export default SimpleAnime;

How to make the collapsible sidebar on the right ? I mean what values should to and from pros be given such that the div moves from right end to the width of div ?