Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(easings): separate timingFunctions into separate easing functions
re #402
- Loading branch information
Showing
9 changed files
with
390 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
// @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()] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
// @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()] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
// @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()] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`easeIn should return easeInBack cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.600, -0.280, 0.735, 0.045)", | ||
} | ||
`; | ||
|
||
exports[`easeIn should return easeInCirc cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.600, 0.040, 0.980, 0.335)", | ||
} | ||
`; | ||
|
||
exports[`easeIn should return easeInCubic cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.550, 0.055, 0.675, 0.190)", | ||
} | ||
`; | ||
|
||
exports[`easeIn should return easeInExpo cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.950, 0.050, 0.795, 0.035)", | ||
} | ||
`; | ||
|
||
exports[`easeIn should return easeInQuad cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.550, 0.085, 0.680, 0.530)", | ||
} | ||
`; | ||
|
||
exports[`easeIn should return easeInQuart cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.895, 0.030, 0.685, 0.220)", | ||
} | ||
`; | ||
|
||
exports[`easeIn should return easeInQuint cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.755, 0.050, 0.855, 0.060)", | ||
} | ||
`; | ||
|
||
exports[`easeIn should return easeInSine cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.470, 0.000, 0.745, 0.715)", | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`easeInOut should return easeInOutBack cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.680, -0.550, 0.265, 1.550)", | ||
} | ||
`; | ||
|
||
exports[`easeInOut should return easeInOutCirc cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.785, 0.135, 0.150, 0.860)", | ||
} | ||
`; | ||
|
||
exports[`easeInOut should return easeInOutCubic cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.645, 0.045, 0.355, 1.000)", | ||
} | ||
`; | ||
|
||
exports[`easeInOut should return easeInOutExpo cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(1.000, 0.000, 0.000, 1.000)", | ||
} | ||
`; | ||
|
||
exports[`easeInOut should return easeInOutQuad cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.455, 0.030, 0.515, 0.955)", | ||
} | ||
`; | ||
|
||
exports[`easeInOut should return easeInOutQuart cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.770, 0.000, 0.175, 1.000)", | ||
} | ||
`; | ||
|
||
exports[`easeInOut should return easeInOutQuint cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.860, 0.000, 0.070, 1.000)", | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`easeOut should return easeOutBack cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.175, 0.885, 0.320, 1.275)", | ||
} | ||
`; | ||
|
||
exports[`easeOut should return easeOutCirc cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.075, 0.820, 0.165, 1.000)", | ||
} | ||
`; | ||
|
||
exports[`easeOut should return easeOutCubic cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.215, 0.610, 0.355, 1.000)", | ||
} | ||
`; | ||
|
||
exports[`easeOut should return easeOutExpo cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.190, 1.000, 0.220, 1.000)", | ||
} | ||
`; | ||
|
||
exports[`easeOut should return easeOutQuad cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.250, 0.460, 0.450, 0.940)", | ||
} | ||
`; | ||
|
||
exports[`easeOut should return easeOutQuart cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.165, 0.840, 0.440, 1.000)", | ||
} | ||
`; | ||
|
||
exports[`easeOut should return easeOutQuint cubic-bezier 1`] = ` | ||
Object { | ||
"transition-timing-function": "cubic-bezier(0.230, 1.000, 0.320, 1.000)", | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
// @flow | ||
import easeIn from '../easeIn' | ||
|
||
describe('easeIn', () => { | ||
it('should return easeInBack cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeIn('back'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInCirc cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeIn('circ'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInCubic cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeIn('cubic'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInExpo cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeIn('expo'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInQuad cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeIn('quad'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInQuart cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeIn('quart'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInQuint cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeIn('quint'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInSine cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeIn('sine'), | ||
}).toMatchSnapshot() | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
// @flow | ||
import easeInOut from '../easeInOut' | ||
|
||
describe('easeInOut', () => { | ||
it('should return easeInOutBack cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeInOut('back'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInOutCirc cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeInOut('circ'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInOutCubic cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeInOut('cubic'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInOutExpo cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeInOut('expo'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInOutQuad cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeInOut('quad'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInOutQuart cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeInOut('quart'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeInOutQuint cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeInOut('quint'), | ||
}).toMatchSnapshot() | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
// @flow | ||
import easeOut from '../easeOut' | ||
|
||
describe('easeOut', () => { | ||
it('should return easeOutBack cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeOut('back'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeOutCirc cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeOut('circ'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeOutCubic cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeOut('cubic'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeOutExpo cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeOut('expo'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeOutQuad cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeOut('quad'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeOutQuart cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeOut('quart'), | ||
}).toMatchSnapshot() | ||
}) | ||
|
||
it('should return easeOutQuint cubic-bezier', () => { | ||
expect({ | ||
'transition-timing-function': easeOut('quint'), | ||
}).toMatchSnapshot() | ||
}) | ||
}) |