test.js

import styled from 'styled-components';
import posed from 'react-pose';

const Perspective = styled.div`
  perspective: 800px;
  overflow: visible !important;
  transform-style: preserve-3d;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px;
`;

const Cover = styled.div`
  background-color: white;
  z-index: 100;
  position: absolute;

  border-radius: 8px;

  height: 80px;
  width: 90%;

  transform-origin: bottom center;
`;

const TopBar = styled.div`
  background-color: white;
  z-index: 0;
  position: absolute;

  border-radius: 8px 8px 0px 0px;
  top: 8px;

  height: 40px;
  width: 90%;
`;

const Main = styled.div`
  background-color: white;
  z-index: 0;
  position: absolute;

  top: 48px;

  height: 240px;
  width: 90%;

  transform-origin: top center;
`;

const Actions = styled.div`
  background-color: white;
  z-index: 0;
  position: absolute;
  border-radius: 0 0 8px 8px;

  top: 288px;

  height: 160px;
  width: 90%;

  transform-origin: top center;
`;

const PosedCover = posed(Cover)({
  open: {
    rotateX: '0deg',
    opacity: 1,
    transition: {
      type: 'spring',
      mass: 0.5
    },
    delay: 150
  },
  closed: {
    rotateX: '-180deg',
    opacity: 0,
    transition: {
      type: 'tween',
      duration: 150
    }
  }
});

const PosedTopBar = posed(TopBar)({
  open: {
    opacity: 1,
    transition: {
      duration: 50
    }
  },
  closed: {
    delay: 200,
    opacity: 0,
    transition: {
      duration: 150
    }
  }
});

const PosedMain = posed(Main)({
  closed: {
    rotateX: '180deg',
    opacity: 0,
    scaleY: 0.2,
    transition: {
      type: 'tween',
      duration: 150
    },
    applyAtEnd: { display: 'none' },
    delay: 150
  },
  open: {
    rotateX: '0deg',
    opacity: 1,
    scaleY: 1,
    transition: {
      type: 'tween',
      duration: 150
    },
    applyAtStart: { display: 'block' }
  }
});

const PosedActions = posed(Actions)({
  closed: {
    rotateX: '180deg',
    opacity: 0,
    transition: {
      type: 'tween',
      duration: 150
    },
    applyAtEnd: { display: 'none' }
  },
  open: {
    rotateX: '0deg',
    opacity: 1,
    transition: {
      type: 'spring',
      mass: 0.5
    },
    delay: 150,
    applyAtStart: { display: 'block' }
  }
});

class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      pose: true
    };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({
        pose: !this.state.pose
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    const { pose } = this.state;

    return (
      <div style={{ height: '100vh' }}>
        <Perspective>
          <PosedActions pose={!pose ? 'closed' : 'open'} />
          <PosedMain pose={!pose ? 'closed' : 'open'} />
          <PosedCover front pose={pose ? 'closed' : 'open'} />
          <PosedTopBar pose={!pose ? 'closed' : 'open'} />
        </Perspective>
      </div>
    );
  }
}

export default Test;