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.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()]
|
|
}
|