animations.js

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' }
  }
});