import posed from 'react-pose'
import { easing } from 'popmotion'

export const PoseFadeSlideFromTop = posed.div({
  out: {
    opacity: 0,
    translateY: '-10%',
  },
  in: {
    opacity: 1,
    translateY: '0',
    transition: {
      duration: 800,
      ease: easing.circOut,
    },
  },
})

export const PoseFadeSlideFromLeft = posed.div({
  out: {
    opacity: 0,
    translateX: '-10%',
  },
  in: {
    opacity: 1,
    translateX: '0',
    transition: {
      duration: 800,
      ease: easing.circOut,
    },
  },
})

export const PoseFadeSlideFromRight = posed.div({
  out: {
    opacity: 0,
    translateX: '10%',
  },
  in: {
    opacity: 1,
    translateX: '0',
    transition: {
      duration: 800,
      ease: easing.circOut,
    },
  },
})

export const PoseFadeSlideFromBottom = posed.div({
  out: {
    opacity: 0,
    translateY: '10%',
  },
  in: {
    opacity: 1,
    translateY: '0',
    transition: {
      duration: 800,
      ease: easing.circOut,
    },
  },
})

export const PoseScaleFadeSlideFromTop = posed.div({
  out: {
    opacity: 0,
    translateY: '-10%',
    scale: 0.98,
  },
  in: {
    opacity: 1,
    translateY: '0',
    scale: 1,
    transition: {
      duration: 800,
      ease: easing.circOut,
    },
  },
})

export const PoseScaleFade = posed.div({
  out: {
    opacity: 0,
    scale: 0.98,
  },
  in: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 800,
      ease: easing.circOut,
    },
  },
})