// @flow import type { TimingFunction } from '../types/timingFunction' const functionsMap = { back: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)', circ: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)', cubic: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)', expo: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)', quad: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)', quart: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)', quint: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)', sine: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)', } /** * String to represent common easing functions as demonstrated here: (github.com/jaukia/easie). * * @example * // Styles as object usage * const styles = { * 'transitionTimingFunction': easeIn('quad') * } * * // styled-components usage * const div = styled.div` * transitionTimingFunction: ${easeIn('quad')}; * ` * * // CSS as JS Output * * 'div': { * 'transitionTimingFunction': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)', * } */ export default function easeIn(functionName: string): TimingFunction { return functionsMap[functionName.toLowerCase().trim()] }