// @flow import type { TimingFunction } from '../types/timingFunction' const functionsMap = { back: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)', cubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)', circ: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)', expo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)', quad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', quart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', quint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)', sine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', } /** * String to represent common easing functions as demonstrated here: (github.com/jaukia/easie). * * @example * // Styles as object usage * const styles = { * 'transitionTimingFunction': easeOut('quad') * } * * // styled-components usage * const div = styled.div` * transitionTimingFunction: ${easeOut('quad')}; * ` * * // CSS as JS Output * * 'div': { * 'transitionTimingFunction': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)', * } */ export default function easeOut(functionName: string): TimingFunction { return functionsMap[functionName.toLowerCase().trim()] }