38 lines
1.1 KiB
Plaintext
38 lines
1.1 KiB
Plaintext
// @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()]
|
|
}
|