12345678910111213141516171819202122232425262728293031323334353637 |
- // @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()]
- }
|