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 common 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 |