easeInOut.js.flow 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. // @flow
  2. import type { TimingFunction } from '../types/timingFunction'
  3. const functionsMap = {
  4. back: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
  5. circ: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
  6. cubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
  7. expo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',
  8. quad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
  9. quart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',
  10. quint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',
  11. sine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',
  12. }
  13. /**
  14. * String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).
  15. *
  16. * @example
  17. * // Styles as object usage
  18. * const styles = {
  19. * 'transitionTimingFunction': easeInOut('quad')
  20. * }
  21. *
  22. * // styled-components usage
  23. * const div = styled.div`
  24. * transitionTimingFunction: ${easeInOut('quad')};
  25. * `
  26. *
  27. * // CSS as JS Output
  28. *
  29. * 'div': {
  30. * 'transitionTimingFunction': 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
  31. * }
  32. */
  33. export default function easeInOut(functionName: string): TimingFunction {
  34. return functionsMap[functionName.toLowerCase().trim()]
  35. }