// @flow import type { TimingFunction } from '../types/timingFunction' const functionsMap = { back: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)', circ: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)', cubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)', expo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)', quad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', quart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)', quint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)', sine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)', } /** * String to represent common easing functions as demonstrated here: (github.com/jaukia/easie). * * @example * // Styles as object usage * const styles = { * 'transitionTimingFunction': easeInOut('quad') * } * * // styled-components usage * const div = styled.div` * transitionTimingFunction: ${easeInOut('quad')}; * ` * * // CSS as JS Output * * 'div': { * 'transitionTimingFunction': 'cubic-bezier(0.455, 0.030, 0.515, 0.955)', * } */ export default function easeInOut(functionName: string): TimingFunction { return functionsMap[functionName.toLowerCase().trim()] }