# All files / mixins timingFunctions.js

100% Statements 2/2
100% Branches 0/0
100% Functions 1/1
100% Lines 2/2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87

    1x

    24x

     // @flow

    /* eslint-disable key-spacing */
    const functionsMap = {
      'easeInBack':     'cubic-bezier(0.600, -0.280, 0.735, 0.045)',
      'easeInCirc':     'cubic-bezier(0.600,  0.040, 0.980, 0.335)',
      'easeInCubic':    'cubic-bezier(0.550,  0.055, 0.675, 0.190)',
      'easeInExpo':     'cubic-bezier(0.950,  0.050, 0.795, 0.035)',
      'easeInQuad':     'cubic-bezier(0.550,  0.085, 0.680, 0.530)',
      'easeInQuart':    'cubic-bezier(0.895,  0.030, 0.685, 0.220)',
      'easeInQuint':    'cubic-bezier(0.755,  0.050, 0.855, 0.060)',
      'easeInSine':     'cubic-bezier(0.470,  0.000, 0.745, 0.715)',

      'easeOutBack':    'cubic-bezier(0.175,  0.885, 0.320, 1.275)',
      'easeOutCubic':   'cubic-bezier(0.215,  0.610, 0.355, 1.000)',
      'easeOutCirc':    'cubic-bezier(0.075,  0.820, 0.165, 1.000)',
      'easeOutExpo':    'cubic-bezier(0.190,  1.000, 0.220, 1.000)',
      'easeOutQuad':    'cubic-bezier(0.250,  0.460, 0.450, 0.940)',
      'easeOutQuart':   'cubic-bezier(0.165,  0.840, 0.440, 1.000)',
      'easeOutQuint':   'cubic-bezier(0.230,  1.000, 0.320, 1.000)',
      'easeOutSine':    'cubic-bezier(0.390,  0.575, 0.565, 1.000)',

      'easeInOutBack':  'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
      'easeInOutCirc':  'cubic-bezier(0.785,  0.135, 0.150, 0.860)',
      'easeInOutCubic': 'cubic-bezier(0.645,  0.045, 0.355, 1.000)',
      'easeInOutExpo':  'cubic-bezier(1.000,  0.000, 0.000, 1.000)',
      'easeInOutQuad':  'cubic-bezier(0.455,  0.030, 0.515, 0.955)',
      'easeInOutQuart': 'cubic-bezier(0.770,  0.000, 0.175, 1.000)',
      'easeInOutQuint': 'cubic-bezier(0.860,  0.000, 0.070, 1.000)',
      'easeInOutSine':  'cubic-bezier(0.445,  0.050, 0.550, 0.950)',
    }
    /* eslint-enable key-spacing */

    /** */
    type TimingFunction =
      | 'easeInBack'
      | 'easeInCirc'
      | 'easeInCubic'
      | 'easeInExpo'
      | 'easeInQuad'
      | 'easeInQuart'
      | 'easeInQuint'
      | 'easeInSine'
      | 'easeOutBack'
      | 'easeOutCubic'
      | 'easeOutCirc'
      | 'easeOutExpo'
      | 'easeOutQuad'
      | 'easeOutQuart'
      | 'easeOutQuint'
      | 'easeOutSine'
      | 'easeInOutBack'
      | 'easeInOutCirc'
      | 'easeInOutCubic'
      | 'easeInOutExpo'
      | 'easeInOutQuad'
      | 'easeInOutQuart'
      | 'easeInOutQuint'
      | 'easeInOutSine';

    /**
     * String to represent commong easing functions as demonstrated here: (github.com/jaukia/easie).
     *
     * @example
     * // Styles as object usage
     * const styles = {
     *   'transition-timing-function': timingFunctions('easeInQuad')
     * }
     *
     * // styled-components usage
     *  const div = styled.div`
     *   transition-timing-function: ${timingFunctions('easeInQuad')};
     * `
     *
     * // CSS as JS Output
     *
     * 'div': {
     *   'transition-timing-function': 'cubic-bezier(0.550,  0.085, 0.680, 0.530)',
     * }
     */

    function timingFunctions(timingFunction: TimingFunction) {
      return functionsMap[timingFunction]
    }

    export default timingFunctions