react-motion with glamorous & glamor

index.html

<div id="app"></div>

react-motion-with-glamorous-glamor.markdown

react-motion with glamorous & glamor

A Pen by Kye Hohenberger on CodePen.

License.

script.babel

const { Component, createElement, DOM } = React;
const { Motion, spring, presets } = ReactMotion;
const { Div, Button } = glamorous;

const buttonStyle = {
  backgroundColor: 'transparent',
  color: 'white',
  border: '1px solid white',
  borderRadius: 4,
  height: 40,
  lineHeight: 2.5,
  paddingLeft: 16,
  paddingRight: 16,
  outline: 'none',
  cursor: 'pointer'
}

const appStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100vh',
  width: '100vw',
  background: '#55DFBD'
}

const panelStyle = {
  position: 'absolute',
  top: 0,
  bottom: 0,
  left: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100vh',
  width: 320,
  background: '#45B0F9'
}

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      panelOpen: false
    }
  }

  render () {
    const { panelOpen } = this.state

    return (
      <Div css={appStyle}>
        <Button
          css={buttonStyle}
          onClick={() => this.setState({ panelOpen: !panelOpen })}
        >
          Toggle Panel
        </Button>
        <Motion
          style={{
            x: spring(panelOpen ? 0 : -100),
            opacity: spring(panelOpen ? 1 : 0)
          }}
        >{(currentStyles) => (
          <Div
            css={{
              ...panelStyle,
              transform: `translate3d(${currentStyles.x}%, 0, 0)`,
              opacity: currentStyles.opacity
            }}
          >
            <Button
              css={buttonStyle}
              onClick={() => this.setState({ panelOpen: false })}
            >
              Close Panel
            </Button>
          </Div>
        )}
        </Motion>
      </Div>
    )
  }
}

ReactDOM.render(createElement(App), document.getElementById('app'))

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://unpkg.com/react-motion@0.4.5/build/react-motion.js"></script>
<script src="https://unpkg.com/glamorous@3.13.3/dist/glamorous.umd.min.js"></script>
<script src="https://unpkg.com/glamor@2.20.25/umd/index.min.js"></script>