From dd29692fcd1489d6d37ced411576226a3a0bb15a Mon Sep 17 00:00:00 2001 From: Brian Hough Date: Sun, 17 May 2020 09:21:09 -0400 Subject: [PATCH] feat(easings): separate timingFunctions into separate easing functions (#513) re #402 --- src/easings/easeIn.js | 37 +++++++++++++ src/easings/easeInOut.js | 37 +++++++++++++ src/easings/easeOut.js | 37 +++++++++++++ .../test/__snapshots__/easeIn.test.js.snap | 49 +++++++++++++++++ .../test/__snapshots__/easeInOut.test.js.snap | 43 +++++++++++++++ .../test/__snapshots__/easeOut.test.js.snap | 43 +++++++++++++++ src/easings/test/easeIn.test.js | 52 +++++++++++++++++++ src/easings/test/easeInOut.test.js | 46 ++++++++++++++++ src/easings/test/easeOut.test.js | 46 ++++++++++++++++ 9 files changed, 390 insertions(+) create mode 100644 src/easings/easeIn.js create mode 100644 src/easings/easeInOut.js create mode 100644 src/easings/easeOut.js create mode 100644 src/easings/test/__snapshots__/easeIn.test.js.snap create mode 100644 src/easings/test/__snapshots__/easeInOut.test.js.snap create mode 100644 src/easings/test/__snapshots__/easeOut.test.js.snap create mode 100644 src/easings/test/easeIn.test.js create mode 100644 src/easings/test/easeInOut.test.js create mode 100644 src/easings/test/easeOut.test.js diff --git a/src/easings/easeIn.js b/src/easings/easeIn.js new file mode 100644 index 00000000..94083be9 --- /dev/null +++ b/src/easings/easeIn.js @@ -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()] +} diff --git a/src/easings/easeInOut.js b/src/easings/easeInOut.js new file mode 100644 index 00000000..60fe472a --- /dev/null +++ b/src/easings/easeInOut.js @@ -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()] +} diff --git a/src/easings/easeOut.js b/src/easings/easeOut.js new file mode 100644 index 00000000..8db9ae39 --- /dev/null +++ b/src/easings/easeOut.js @@ -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()] +} diff --git a/src/easings/test/__snapshots__/easeIn.test.js.snap b/src/easings/test/__snapshots__/easeIn.test.js.snap new file mode 100644 index 00000000..3c57fcd9 --- /dev/null +++ b/src/easings/test/__snapshots__/easeIn.test.js.snap @@ -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)", +} +`; diff --git a/src/easings/test/__snapshots__/easeInOut.test.js.snap b/src/easings/test/__snapshots__/easeInOut.test.js.snap new file mode 100644 index 00000000..72f5492e --- /dev/null +++ b/src/easings/test/__snapshots__/easeInOut.test.js.snap @@ -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)", +} +`; diff --git a/src/easings/test/__snapshots__/easeOut.test.js.snap b/src/easings/test/__snapshots__/easeOut.test.js.snap new file mode 100644 index 00000000..361c4308 --- /dev/null +++ b/src/easings/test/__snapshots__/easeOut.test.js.snap @@ -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)", +} +`; diff --git a/src/easings/test/easeIn.test.js b/src/easings/test/easeIn.test.js new file mode 100644 index 00000000..95f6e43f --- /dev/null +++ b/src/easings/test/easeIn.test.js @@ -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() + }) +}) diff --git a/src/easings/test/easeInOut.test.js b/src/easings/test/easeInOut.test.js new file mode 100644 index 00000000..b7d6de0c --- /dev/null +++ b/src/easings/test/easeInOut.test.js @@ -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() + }) +}) diff --git a/src/easings/test/easeOut.test.js b/src/easings/test/easeOut.test.js new file mode 100644 index 00000000..b76e7d05 --- /dev/null +++ b/src/easings/test/easeOut.test.js @@ -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() + }) +})