From 74af9993e1f812bdc9d8a4635f8477295168efa8 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 14 Nov 2023 17:19:33 +0100 Subject: [PATCH] chore(react-motions): rename exports for atoms (#29835) --- .../etc/react-motions-preview.api.md | 374 +++++++++--------- .../react-motions-preview/src/atoms/fade.ts | 29 +- .../react-motions-preview/src/atoms/scale.ts | 28 +- .../react-motions-preview/src/atoms/slide.ts | 112 +++--- 4 files changed, 271 insertions(+), 272 deletions(-) diff --git a/packages/react-components/react-motions-preview/etc/react-motions-preview.api.md b/packages/react-components/react-motions-preview/etc/react-motions-preview.api.md index e2222eef9267a..27124b9a1ee93 100644 --- a/packages/react-components/react-motions-preview/etc/react-motions-preview.api.md +++ b/packages/react-components/react-motions-preview/etc/react-motions-preview.api.md @@ -13,362 +13,362 @@ declare namespace atoms { } export { atoms } -declare namespace fade { - export { - fadeEnterUltraFast, - fadeEnterFaster, - fadeEnterFast, - fadeEnterNormal, - fadeEnterSlow, - fadeEnterSlower, - fadeEnterUltraSlow, - fadeExitUltraFast, - fadeExitFaster, - fadeExitFast, - fadeExitNormal, - fadeExitSlow, - fadeExitSlower, - fadeExitUltraSlow - } -} - // @public (undocumented) -const fadeEnterFast: ({ fromValue }: FadeParams) => MotionAtom; +const downEnterFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeEnterFaster: ({ fromValue }: FadeParams) => MotionAtom; +const downEnterFaster: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeEnterNormal: ({ fromValue }: FadeParams) => MotionAtom; +const downEnterNormal: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeEnterSlow: ({ fromValue }: FadeParams) => MotionAtom; +const downEnterSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeEnterSlower: ({ fromValue }: FadeParams) => MotionAtom; +const downEnterSlower: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeEnterUltraFast: ({ fromValue }: FadeParams) => MotionAtom; +const downEnterUltraFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeEnterUltraSlow: ({ fromValue }: FadeParams) => MotionAtom; +const downEnterUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeExitFast: ({ fromValue }: FadeParams) => MotionAtom; +const downExitFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeExitFaster: ({ fromValue }: FadeParams) => MotionAtom; +const downExitFaster: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeExitNormal: ({ fromValue }: FadeParams) => MotionAtom; +const downExitNormal: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeExitSlow: ({ fromValue }: FadeParams) => MotionAtom; +const downExitSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeExitSlower: ({ fromValue }: FadeParams) => MotionAtom; +const downExitSlower: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeExitUltraFast: ({ fromValue }: FadeParams) => MotionAtom; +const downExitUltraFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const fadeExitUltraSlow: ({ fromValue }: FadeParams) => MotionAtom; +const downExitUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -export type MotionAtom = { - keyframes: Keyframe[]; - options: KeyframeEffectOptions; -}; - -declare namespace scale { - export { - scaleEnterUltraFast, - scaleEnterFaster, - scaleEnterFast, - scaleEnterNormal, - scaleEnterSlow, - scaleEnterSlower, - scaleEnterUltraSlow, - scaleExitUltraFast, - scaleExitFaster, - scaleExitFast, - scaleExitNormal, - scaleExitSlow, - scaleExitSlower, - scaleExitUltraSlow - } -} +const enterFast: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const scaleEnterFast: ({ fromValue }: ScaleParams) => MotionAtom; +const enterFast_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const scaleEnterFaster: ({ fromValue }: ScaleParams) => MotionAtom; +const enterFaster: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const scaleEnterNormal: ({ fromValue }: ScaleParams) => MotionAtom; +const enterFaster_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const scaleEnterSlow: ({ fromValue }: ScaleParams) => MotionAtom; +const enterNormal: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const scaleEnterSlower: ({ fromValue }: ScaleParams) => MotionAtom; +const enterNormal_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const scaleEnterUltraFast: ({ fromValue }: ScaleParams) => MotionAtom; +const enterSlow: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const scaleEnterUltraSlow: ({ fromValue }: ScaleParams) => MotionAtom; +const enterSlow_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const scaleExitFast: ({ fromValue }: ScaleParams) => MotionAtom; +const enterSlower: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const scaleExitFaster: ({ fromValue }: ScaleParams) => MotionAtom; +const enterSlower_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const scaleExitNormal: ({ fromValue }: ScaleParams) => MotionAtom; +const enterUltraFast: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const scaleExitSlow: ({ fromValue }: ScaleParams) => MotionAtom; +const enterUltraFast_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const scaleExitSlower: ({ fromValue }: ScaleParams) => MotionAtom; +const enterUltraSlow: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const scaleExitUltraFast: ({ fromValue }: ScaleParams) => MotionAtom; +const enterUltraSlow_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const scaleExitUltraSlow: ({ fromValue }: ScaleParams) => MotionAtom; - -declare namespace slide { - export { - slideDownEnterUltraFast, - slideDownEnterFaster, - slideDownEnterFast, - slideDownEnterNormal, - slideDownEnterSlow, - slideDownEnterSlower, - slideDownEnterUltraSlow, - slideUpEnterUltraFast, - slideUpEnterFaster, - slideUpEnterFast, - slideUpEnterNormal, - slideUpEnterSlow, - slideUpEnterSlower, - slideUpEnterUltraSlow, - slideLeftEnterUltraFast, - slideLeftEnterFaster, - slideLeftEnterFast, - slideLeftEnterNormal, - slideLeftEnterSlow, - slideLeftEnterSlower, - slideLeftEnterUltraSlow, - slideRightEnterUltraFast, - slideRightEnterFaster, - slideRightEnterFast, - slideRightEnterNormal, - slideRightEnterSlow, - slideRightEnterSlower, - slideRightEnterUltraSlow, - slideDownExitUltraFast, - slideDownExitFaster, - slideDownExitFast, - slideDownExitNormal, - slideDownExitSlow, - slideDownExitSlower, - slideDownExitUltraSlow, - slideUpExitUltraFast, - slideUpExitFaster, - slideUpExitFast, - slideUpExitNormal, - slideUpExitSlow, - slideUpExitSlower, - slideUpExitUltraSlow, - slideRightExitUltraFast, - slideRightExitFaster, - slideRightExitFast, - slideRightExitNormal, - slideRightExitSlow, - slideRightExitSlower, - slideRightExitUltraSlow, - slideLeftExitUltraFast, - slideLeftExitFaster, - slideLeftExitFast, - slideLeftExitNormal, - slideLeftExitSlow, - slideLeftExitSlower, - slideLeftExitUltraSlow - } -} +const exitFast: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const slideDownEnterFast: ({ fromValue }: SlideParams) => MotionAtom; +const exitFast_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const slideDownEnterFaster: ({ fromValue }: SlideParams) => MotionAtom; +const exitFaster: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const slideDownEnterNormal: ({ fromValue }: SlideParams) => MotionAtom; +const exitFaster_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const slideDownEnterSlow: ({ fromValue }: SlideParams) => MotionAtom; +const exitNormal: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const slideDownEnterSlower: ({ fromValue }: SlideParams) => MotionAtom; +const exitNormal_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const slideDownEnterUltraFast: ({ fromValue }: SlideParams) => MotionAtom; +const exitSlow: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const slideDownEnterUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; +const exitSlow_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const slideDownExitFast: ({ fromValue }: SlideParams) => MotionAtom; +const exitSlower: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const slideDownExitFaster: ({ fromValue }: SlideParams) => MotionAtom; +const exitSlower_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const slideDownExitNormal: ({ fromValue }: SlideParams) => MotionAtom; +const exitUltraFast: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const slideDownExitSlow: ({ fromValue }: SlideParams) => MotionAtom; +const exitUltraFast_2: ({ fromValue }: ScaleParams) => MotionAtom; // @public (undocumented) -const slideDownExitSlower: ({ fromValue }: SlideParams) => MotionAtom; +const exitUltraSlow: ({ fromValue }: FadeParams) => MotionAtom; // @public (undocumented) -const slideDownExitUltraFast: ({ fromValue }: SlideParams) => MotionAtom; +const exitUltraSlow_2: ({ fromValue }: ScaleParams) => MotionAtom; + +declare namespace fade { + export { + enterUltraFast, + enterFaster, + enterFast, + enterNormal, + enterSlow, + enterSlower, + enterUltraSlow, + exitUltraFast, + exitFaster, + exitFast, + exitNormal, + exitSlow, + exitSlower, + exitUltraSlow + } +} // @public (undocumented) -const slideDownExitUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; +const leftEnterFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftEnterFast: ({ fromValue }: SlideParams) => MotionAtom; +const leftEnterFaster: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftEnterFaster: ({ fromValue }: SlideParams) => MotionAtom; +const leftEnterNormal: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftEnterNormal: ({ fromValue }: SlideParams) => MotionAtom; +const leftEnterSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftEnterSlow: ({ fromValue }: SlideParams) => MotionAtom; +const leftEnterSlower: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftEnterSlower: ({ fromValue }: SlideParams) => MotionAtom; +const leftEnterUltraFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftEnterUltraFast: ({ fromValue }: SlideParams) => MotionAtom; +const leftEnterUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftEnterUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; +const leftExitFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftExitFast: ({ fromValue }: SlideParams) => MotionAtom; +const leftExitFaster: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftExitFaster: ({ fromValue }: SlideParams) => MotionAtom; +const leftExitNormal: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftExitNormal: ({ fromValue }: SlideParams) => MotionAtom; +const leftExitSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftExitSlow: ({ fromValue }: SlideParams) => MotionAtom; +const leftExitSlower: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftExitSlower: ({ fromValue }: SlideParams) => MotionAtom; +const leftExitUltraFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftExitUltraFast: ({ fromValue }: SlideParams) => MotionAtom; +const leftExitUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideLeftExitUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; +export type MotionAtom = { + keyframes: Keyframe[]; + options: KeyframeEffectOptions; +}; // @public (undocumented) -const slideRightEnterFast: ({ fromValue }: SlideParams) => MotionAtom; +const rightEnterFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightEnterFaster: ({ fromValue }: SlideParams) => MotionAtom; +const rightEnterFaster: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightEnterNormal: ({ fromValue }: SlideParams) => MotionAtom; +const rightEnterNormal: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightEnterSlow: ({ fromValue }: SlideParams) => MotionAtom; +const rightEnterSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightEnterSlower: ({ fromValue }: SlideParams) => MotionAtom; +const rightEnterSlower: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightEnterUltraFast: ({ fromValue }: SlideParams) => MotionAtom; +const rightEnterUltraFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightEnterUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; +const rightEnterUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightExitFast: ({ fromValue }: SlideParams) => MotionAtom; +const rightExitFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightExitFaster: ({ fromValue }: SlideParams) => MotionAtom; +const rightExitFaster: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightExitNormal: ({ fromValue }: SlideParams) => MotionAtom; +const rightExitNormal: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightExitSlow: ({ fromValue }: SlideParams) => MotionAtom; +const rightExitSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightExitSlower: ({ fromValue }: SlideParams) => MotionAtom; +const rightExitSlower: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightExitUltraFast: ({ fromValue }: SlideParams) => MotionAtom; +const rightExitUltraFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideRightExitUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; +const rightExitUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; + +declare namespace scale { + export { + enterUltraFast_2 as enterUltraFast, + enterFaster_2 as enterFaster, + enterFast_2 as enterFast, + enterNormal_2 as enterNormal, + enterSlow_2 as enterSlow, + enterSlower_2 as enterSlower, + enterUltraSlow_2 as enterUltraSlow, + exitUltraFast_2 as exitUltraFast, + exitFaster_2 as exitFaster, + exitFast_2 as exitFast, + exitNormal_2 as exitNormal, + exitSlow_2 as exitSlow, + exitSlower_2 as exitSlower, + exitUltraSlow_2 as exitUltraSlow + } +} + +declare namespace slide { + export { + downEnterUltraFast, + downEnterFaster, + downEnterFast, + downEnterNormal, + downEnterSlow, + downEnterSlower, + downEnterUltraSlow, + upEnterUltraFast, + upEnterFaster, + upEnterFast, + upEnterNormal, + upEnterSlow, + upEnterSlower, + upEnterUltraSlow, + leftEnterUltraFast, + leftEnterFaster, + leftEnterFast, + leftEnterNormal, + leftEnterSlow, + leftEnterSlower, + leftEnterUltraSlow, + rightEnterUltraFast, + rightEnterFaster, + rightEnterFast, + rightEnterNormal, + rightEnterSlow, + rightEnterSlower, + rightEnterUltraSlow, + downExitUltraFast, + downExitFaster, + downExitFast, + downExitNormal, + downExitSlow, + downExitSlower, + downExitUltraSlow, + upExitUltraFast, + upExitFaster, + upExitFast, + upExitNormal, + upExitSlow, + upExitSlower, + upExitUltraSlow, + rightExitUltraFast, + rightExitFaster, + rightExitFast, + rightExitNormal, + rightExitSlow, + rightExitSlower, + rightExitUltraSlow, + leftExitUltraFast, + leftExitFaster, + leftExitFast, + leftExitNormal, + leftExitSlow, + leftExitSlower, + leftExitUltraSlow + } +} // @public (undocumented) -const slideUpEnterFast: ({ fromValue }: SlideParams) => MotionAtom; +const upEnterFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpEnterFaster: ({ fromValue }: SlideParams) => MotionAtom; +const upEnterFaster: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpEnterNormal: ({ fromValue }: SlideParams) => MotionAtom; +const upEnterNormal: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpEnterSlow: ({ fromValue }: SlideParams) => MotionAtom; +const upEnterSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpEnterSlower: ({ fromValue }: SlideParams) => MotionAtom; +const upEnterSlower: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpEnterUltraFast: ({ fromValue }: SlideParams) => MotionAtom; +const upEnterUltraFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpEnterUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; +const upEnterUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpExitFast: ({ fromValue }: SlideParams) => MotionAtom; +const upExitFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpExitFaster: ({ fromValue }: SlideParams) => MotionAtom; +const upExitFaster: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpExitNormal: ({ fromValue }: SlideParams) => MotionAtom; +const upExitNormal: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpExitSlow: ({ fromValue }: SlideParams) => MotionAtom; +const upExitSlow: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpExitSlower: ({ fromValue }: SlideParams) => MotionAtom; +const upExitSlower: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpExitUltraFast: ({ fromValue }: SlideParams) => MotionAtom; +const upExitUltraFast: ({ fromValue }: SlideParams) => MotionAtom; // @public (undocumented) -const slideUpExitUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; +const upExitUltraSlow: ({ fromValue }: SlideParams) => MotionAtom; // (No @packageDocumentation comment for this package) diff --git a/packages/react-components/react-motions-preview/src/atoms/fade.ts b/packages/react-components/react-motions-preview/src/atoms/fade.ts index ab5afd9707a17..f5f5e272f5cff 100755 --- a/packages/react-components/react-motions-preview/src/atoms/fade.ts +++ b/packages/react-components/react-motions-preview/src/atoms/fade.ts @@ -18,7 +18,7 @@ type FadeParams = { // Fade Ins // -------------------------------------------------- -export const fadeEnterUltraFast = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const enterUltraFast = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: fromValue }, { opacity: 1 }], options: { duration: durationUltraFast, @@ -26,7 +26,7 @@ export const fadeEnterUltraFast = ({ fromValue = 0 }: FadeParams): MotionAtom => }, }); -export const fadeEnterFaster = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const enterFaster = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: fromValue }, { opacity: 1 }], options: { duration: durationFaster, @@ -34,7 +34,7 @@ export const fadeEnterFaster = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ }, }); -export const fadeEnterFast = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const enterFast = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: fromValue }, { opacity: 1 }], options: { duration: durationFast, @@ -42,7 +42,7 @@ export const fadeEnterFast = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ }, }); -export const fadeEnterNormal = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const enterNormal = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: fromValue }, { opacity: 1 }], options: { duration: durationNormal, @@ -50,8 +50,7 @@ export const fadeEnterNormal = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ }, }); -// Basic Fade In Animation --Slow -export const fadeEnterSlow = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const enterSlow = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: fromValue }, { opacity: 1 }], options: { duration: durationSlow, @@ -59,7 +58,7 @@ export const fadeEnterSlow = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ }, }); -export const fadeEnterSlower = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const enterSlower = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: fromValue }, { opacity: 1 }], options: { duration: durationSlower, @@ -67,7 +66,7 @@ export const fadeEnterSlower = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ }, }); -export const fadeEnterUltraSlow = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const enterUltraSlow = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: fromValue }, { opacity: 1 }], options: { duration: durationUltraSlow, @@ -78,7 +77,7 @@ export const fadeEnterUltraSlow = ({ fromValue = 0 }: FadeParams): MotionAtom => // Fade Ins // -------------------------------------------------- -export const fadeExitUltraFast = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const exitUltraFast = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: 1 }, { opacity: fromValue }], options: { duration: durationUltraFast, @@ -86,7 +85,7 @@ export const fadeExitUltraFast = ({ fromValue = 0 }: FadeParams): MotionAtom => }, }); -export const fadeExitFaster = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const exitFaster = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: 1 }, { opacity: fromValue }], options: { duration: durationFaster, @@ -94,7 +93,7 @@ export const fadeExitFaster = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ }, }); -export const fadeExitFast = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const exitFast = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: 1 }, { opacity: fromValue }], options: { duration: durationFast, @@ -102,7 +101,7 @@ export const fadeExitFast = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ }, }); -export const fadeExitNormal = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const exitNormal = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: 1 }, { opacity: fromValue }], options: { duration: durationNormal, @@ -110,7 +109,7 @@ export const fadeExitNormal = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ }, }); -export const fadeExitSlow = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const exitSlow = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: 1 }, { opacity: fromValue }], options: { duration: durationSlow, @@ -118,7 +117,7 @@ export const fadeExitSlow = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ }, }); -export const fadeExitSlower = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const exitSlower = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: 1 }, { opacity: fromValue }], options: { duration: durationSlower, @@ -126,7 +125,7 @@ export const fadeExitSlower = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ }, }); -export const fadeExitUltraSlow = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ +export const exitUltraSlow = ({ fromValue = 0 }: FadeParams): MotionAtom => ({ keyframes: [{ opacity: 1 }, { opacity: fromValue }], options: { duration: durationUltraSlow, diff --git a/packages/react-components/react-motions-preview/src/atoms/scale.ts b/packages/react-components/react-motions-preview/src/atoms/scale.ts index 264b704835de2..d09effb29e059 100755 --- a/packages/react-components/react-motions-preview/src/atoms/scale.ts +++ b/packages/react-components/react-motions-preview/src/atoms/scale.ts @@ -18,7 +18,7 @@ type ScaleParams = { // Scale Ins // -------------------------------------------------- -export const scaleEnterUltraFast = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ +export const enterUltraFast = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: `scale(${fromValue})`, opacity: 0 }, { transform: 'scale(1)', opacity: 1 }, @@ -29,7 +29,7 @@ export const scaleEnterUltraFast = ({ fromValue = 0.88 }: ScaleParams): MotionAt }, }); -export const scaleEnterFaster = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ +export const enterFaster = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: `scale(${fromValue})`, opacity: 0 }, { transform: 'scale(1)', opacity: 1 }, @@ -40,7 +40,7 @@ export const scaleEnterFaster = ({ fromValue = 0.88 }: ScaleParams): MotionAtom }, }); -export const scaleEnterFast = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ +export const enterFast = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: `scale(${fromValue})`, opacity: 0 }, { transform: 'scale(1)', opacity: 1 }, @@ -51,7 +51,7 @@ export const scaleEnterFast = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => }, }); -export const scaleEnterNormal = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ +export const enterNormal = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: `scale(${fromValue})`, opacity: 0 }, { transform: 'scale(1)', opacity: 1 }, @@ -62,7 +62,7 @@ export const scaleEnterNormal = ({ fromValue = 0.88 }: ScaleParams): MotionAtom }, }); -export const scaleEnterSlow = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ +export const enterSlow = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: `scale(${fromValue})`, opacity: 0 }, { transform: 'scale(1)', opacity: 1 }, @@ -73,7 +73,7 @@ export const scaleEnterSlow = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => }, }); -export const scaleEnterSlower = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ +export const enterSlower = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: `scale(${fromValue})`, opacity: 0 }, { transform: 'scale(1)', opacity: 1 }, @@ -84,7 +84,7 @@ export const scaleEnterSlower = ({ fromValue = 0.88 }: ScaleParams): MotionAtom }, }); -export const scaleEnterUltraSlow = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ +export const enterUltraSlow = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: `scale(${fromValue})`, opacity: 0 }, { transform: 'scale(1)', opacity: 1 }, @@ -98,7 +98,7 @@ export const scaleEnterUltraSlow = ({ fromValue = 0.88 }: ScaleParams): MotionAt // Scale Outs // -------------------------------------------------- -export const scaleExitUltraFast = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => ({ +export const exitUltraFast = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: 'scale(1)', opacity: 1 }, { transform: `scale(${fromValue})`, opacity: 0 }, @@ -109,7 +109,7 @@ export const scaleExitUltraFast = ({ fromValue = 0.9 }: ScaleParams): MotionAtom }, }); -export const scaleExitFaster = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => ({ +export const exitFaster = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: 'scale(1)', opacity: 1 }, { transform: `scale(${fromValue})`, opacity: 0 }, @@ -120,7 +120,7 @@ export const scaleExitFaster = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => }, }); -export const scaleExitFast = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ +export const exitFast = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: 'scale(1)', opacity: 1 }, { transform: `scale(${fromValue})`, opacity: 0 }, @@ -131,7 +131,7 @@ export const scaleExitFast = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => }, }); -export const scaleExitNormal = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => ({ +export const exitNormal = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: 'scale(1)', opacity: 1 }, { transform: `scale(${fromValue})`, opacity: 0 }, @@ -142,7 +142,7 @@ export const scaleExitNormal = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => }, }); -export const scaleExitSlow = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => ({ +export const exitSlow = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: 'scale(1)', opacity: 1 }, { transform: `scale(${fromValue})`, opacity: 0 }, @@ -153,7 +153,7 @@ export const scaleExitSlow = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => ( }, }); -export const scaleExitSlower = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => ({ +export const exitSlower = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: 'scale(1)', opacity: 1 }, { transform: `scale(${fromValue})`, opacity: 0 }, @@ -164,7 +164,7 @@ export const scaleExitSlower = ({ fromValue = 0.9 }: ScaleParams): MotionAtom => }, }); -export const scaleExitUltraSlow = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ +export const exitUltraSlow = ({ fromValue = 0.88 }: ScaleParams): MotionAtom => ({ keyframes: [ { transform: 'scale(1)', opacity: 1 }, { transform: `scale(${fromValue})`, opacity: 0 }, diff --git a/packages/react-components/react-motions-preview/src/atoms/slide.ts b/packages/react-components/react-motions-preview/src/atoms/slide.ts index f554eeb83a911..aafe0ff6431e7 100755 --- a/packages/react-components/react-motions-preview/src/atoms/slide.ts +++ b/packages/react-components/react-motions-preview/src/atoms/slide.ts @@ -18,7 +18,7 @@ type SlideParams = { // Slide Down Ins // -------------------------------------------------- -export const slideDownEnterUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downEnterUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(-${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -29,7 +29,7 @@ export const slideDownEnterUltraFast = ({ fromValue = '20px' }: SlideParams): Mo }, }); -export const slideDownEnterFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downEnterFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(-${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -40,7 +40,7 @@ export const slideDownEnterFaster = ({ fromValue = '20px' }: SlideParams): Motio }, }); -export const slideDownEnterFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downEnterFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(-${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -51,7 +51,7 @@ export const slideDownEnterFast = ({ fromValue = '20px' }: SlideParams): MotionA }, }); -export const slideDownEnterNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downEnterNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(-${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -62,7 +62,7 @@ export const slideDownEnterNormal = ({ fromValue = '20px' }: SlideParams): Motio }, }); -export const slideDownEnterSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downEnterSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(-${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -73,7 +73,7 @@ export const slideDownEnterSlow = ({ fromValue = '20px' }: SlideParams): MotionA }, }); -export const slideDownEnterSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downEnterSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(-${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -84,7 +84,7 @@ export const slideDownEnterSlower = ({ fromValue = '20px' }: SlideParams): Motio }, }); -export const slideDownEnterUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downEnterUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(-${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -98,7 +98,7 @@ export const slideDownEnterUltraSlow = ({ fromValue = '20px' }: SlideParams): Mo // Slide Up Ins // -------------------------------------------------- -export const slideUpEnterUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upEnterUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -109,7 +109,7 @@ export const slideUpEnterUltraFast = ({ fromValue = '20px' }: SlideParams): Moti }, }); -export const slideUpEnterFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upEnterFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -120,7 +120,7 @@ export const slideUpEnterFaster = ({ fromValue = '20px' }: SlideParams): MotionA }, }); -export const slideUpEnterFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upEnterFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -131,7 +131,7 @@ export const slideUpEnterFast = ({ fromValue = '20px' }: SlideParams): MotionAto }, }); -export const slideUpEnterNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upEnterNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -142,7 +142,7 @@ export const slideUpEnterNormal = ({ fromValue = '20px' }: SlideParams): MotionA }, }); -export const slideUpEnterSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upEnterSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -153,7 +153,7 @@ export const slideUpEnterSlow = ({ fromValue = '20px' }: SlideParams): MotionAto }, }); -export const slideUpEnterSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upEnterSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -164,7 +164,7 @@ export const slideUpEnterSlower = ({ fromValue = '20px' }: SlideParams): MotionA }, }); -export const slideUpEnterUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upEnterUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateY(${fromValue})`, opacity: 0 }, { transform: 'translateY(0px)', opacity: 1 }, @@ -178,7 +178,7 @@ export const slideUpEnterUltraSlow = ({ fromValue = '20px' }: SlideParams): Moti // Slide Left Ins // -------------------------------------------------- -export const slideLeftEnterUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftEnterUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -189,7 +189,7 @@ export const slideLeftEnterUltraFast = ({ fromValue = '20px' }: SlideParams): Mo }, }); -export const slideLeftEnterFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftEnterFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -200,7 +200,7 @@ export const slideLeftEnterFaster = ({ fromValue = '20px' }: SlideParams): Motio }, }); -export const slideLeftEnterFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftEnterFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -211,7 +211,7 @@ export const slideLeftEnterFast = ({ fromValue = '20px' }: SlideParams): MotionA }, }); -export const slideLeftEnterNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftEnterNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -222,7 +222,7 @@ export const slideLeftEnterNormal = ({ fromValue = '20px' }: SlideParams): Motio }, }); -export const slideLeftEnterSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftEnterSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -233,7 +233,7 @@ export const slideLeftEnterSlow = ({ fromValue = '20px' }: SlideParams): MotionA }, }); -export const slideLeftEnterSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftEnterSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -244,7 +244,7 @@ export const slideLeftEnterSlower = ({ fromValue = '20px' }: SlideParams): Motio }, }); -export const slideLeftEnterUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftEnterUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -258,7 +258,7 @@ export const slideLeftEnterUltraSlow = ({ fromValue = '20px' }: SlideParams): Mo // Slide Right Ins // -------------------------------------------------- -export const slideRightEnterUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightEnterUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(-${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -269,7 +269,7 @@ export const slideRightEnterUltraFast = ({ fromValue = '20px' }: SlideParams): M }, }); -export const slideRightEnterFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightEnterFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(-${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -280,7 +280,7 @@ export const slideRightEnterFaster = ({ fromValue = '20px' }: SlideParams): Moti }, }); -export const slideRightEnterFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightEnterFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(-${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -291,7 +291,7 @@ export const slideRightEnterFast = ({ fromValue = '20px' }: SlideParams): Motion }, }); -export const slideRightEnterNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightEnterNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(-${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -302,7 +302,7 @@ export const slideRightEnterNormal = ({ fromValue = '20px' }: SlideParams): Moti }, }); -export const slideRightEnterSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightEnterSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(-${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -313,7 +313,7 @@ export const slideRightEnterSlow = ({ fromValue = '20px' }: SlideParams): Motion }, }); -export const slideRightEnterSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightEnterSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(-${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -324,7 +324,7 @@ export const slideRightEnterSlower = ({ fromValue = '20px' }: SlideParams): Moti }, }); -export const slideRightEnterUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightEnterUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: `translateX(-${fromValue})`, opacity: 0 }, { transform: 'translateX(0px)', opacity: 1 }, @@ -338,7 +338,7 @@ export const slideRightEnterUltraSlow = ({ fromValue = '20px' }: SlideParams): M // Slide Down Outs // -------------------------------------------------- -export const slideDownExitUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downExitUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(${fromValue})`, opacity: 0 }, @@ -349,7 +349,7 @@ export const slideDownExitUltraFast = ({ fromValue = '20px' }: SlideParams): Mot }, }); -export const slideDownExitFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downExitFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(${fromValue})`, opacity: 0 }, @@ -360,7 +360,7 @@ export const slideDownExitFaster = ({ fromValue = '20px' }: SlideParams): Motion }, }); -export const slideDownExitFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downExitFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(${fromValue})`, opacity: 0 }, @@ -371,7 +371,7 @@ export const slideDownExitFast = ({ fromValue = '20px' }: SlideParams): MotionAt }, }); -export const slideDownExitNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downExitNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(${fromValue})`, opacity: 0 }, @@ -382,7 +382,7 @@ export const slideDownExitNormal = ({ fromValue = '20px' }: SlideParams): Motion }, }); -export const slideDownExitSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downExitSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(${fromValue})`, opacity: 0 }, @@ -393,7 +393,7 @@ export const slideDownExitSlow = ({ fromValue = '20px' }: SlideParams): MotionAt }, }); -export const slideDownExitSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downExitSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(${fromValue})`, opacity: 0 }, @@ -404,7 +404,7 @@ export const slideDownExitSlower = ({ fromValue = '20px' }: SlideParams): Motion }, }); -export const slideDownExitUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const downExitUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(${fromValue})`, opacity: 0 }, @@ -418,7 +418,7 @@ export const slideDownExitUltraSlow = ({ fromValue = '20px' }: SlideParams): Mot // Slide Up Outs // -------------------------------------------------- -export const slideUpExitUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upExitUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(-${fromValue})`, opacity: 0 }, @@ -429,7 +429,7 @@ export const slideUpExitUltraFast = ({ fromValue = '20px' }: SlideParams): Motio }, }); -export const slideUpExitFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upExitFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(-${fromValue})`, opacity: 0 }, @@ -440,7 +440,7 @@ export const slideUpExitFaster = ({ fromValue = '20px' }: SlideParams): MotionAt }, }); -export const slideUpExitFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upExitFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(-${fromValue})`, opacity: 0 }, @@ -451,7 +451,7 @@ export const slideUpExitFast = ({ fromValue = '20px' }: SlideParams): MotionAtom }, }); -export const slideUpExitNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upExitNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(-${fromValue})`, opacity: 0 }, @@ -462,7 +462,7 @@ export const slideUpExitNormal = ({ fromValue = '20px' }: SlideParams): MotionAt }, }); -export const slideUpExitSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upExitSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(-${fromValue})`, opacity: 0 }, @@ -473,7 +473,7 @@ export const slideUpExitSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom }, }); -export const slideUpExitSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upExitSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(-${fromValue})`, opacity: 0 }, @@ -484,7 +484,7 @@ export const slideUpExitSlower = ({ fromValue = '20px' }: SlideParams): MotionAt }, }); -export const slideUpExitUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const upExitUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateY(0px)', opacity: 1 }, { transform: `translateY(-${fromValue})`, opacity: 0 }, @@ -498,7 +498,7 @@ export const slideUpExitUltraSlow = ({ fromValue = '20px' }: SlideParams): Motio // Slide Right Outs // -------------------------------------------------- -export const slideRightExitUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightExitUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(${fromValue})`, opacity: 0 }, @@ -509,7 +509,7 @@ export const slideRightExitUltraFast = ({ fromValue = '20px' }: SlideParams): Mo }, }); // -export const slideRightExitFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightExitFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(${fromValue})`, opacity: 0 }, @@ -520,7 +520,7 @@ export const slideRightExitFaster = ({ fromValue = '20px' }: SlideParams): Motio }, }); -export const slideRightExitFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightExitFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(${fromValue})`, opacity: 0 }, @@ -531,7 +531,7 @@ export const slideRightExitFast = ({ fromValue = '20px' }: SlideParams): MotionA }, }); -export const slideRightExitNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightExitNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(${fromValue})`, opacity: 0 }, @@ -542,7 +542,7 @@ export const slideRightExitNormal = ({ fromValue = '20px' }: SlideParams): Motio }, }); -export const slideRightExitSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightExitSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(${fromValue})`, opacity: 0 }, @@ -553,7 +553,7 @@ export const slideRightExitSlow = ({ fromValue = '20px' }: SlideParams): MotionA }, }); -export const slideRightExitSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightExitSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(${fromValue})`, opacity: 0 }, @@ -564,7 +564,7 @@ export const slideRightExitSlower = ({ fromValue = '20px' }: SlideParams): Motio }, }); -export const slideRightExitUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const rightExitUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(${fromValue})`, opacity: 0 }, @@ -578,7 +578,7 @@ export const slideRightExitUltraSlow = ({ fromValue = '20px' }: SlideParams): Mo // Slide Left Outs // -------------------------------------------------- -export const slideLeftExitUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftExitUltraFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(-${fromValue})`, opacity: 0 }, @@ -589,7 +589,7 @@ export const slideLeftExitUltraFast = ({ fromValue = '20px' }: SlideParams): Mot }, }); -export const slideLeftExitFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftExitFaster = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(-${fromValue})`, opacity: 0 }, @@ -600,7 +600,7 @@ export const slideLeftExitFaster = ({ fromValue = '20px' }: SlideParams): Motion }, }); -export const slideLeftExitFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftExitFast = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(-${fromValue})`, opacity: 0 }, @@ -611,7 +611,7 @@ export const slideLeftExitFast = ({ fromValue = '20px' }: SlideParams): MotionAt }, }); -export const slideLeftExitNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftExitNormal = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(-${fromValue})`, opacity: 0 }, @@ -622,7 +622,7 @@ export const slideLeftExitNormal = ({ fromValue = '20px' }: SlideParams): Motion }, }); -export const slideLeftExitSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftExitSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(-${fromValue})`, opacity: 0 }, @@ -633,7 +633,7 @@ export const slideLeftExitSlow = ({ fromValue = '20px' }: SlideParams): MotionAt }, }); -export const slideLeftExitSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftExitSlower = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(-${fromValue})`, opacity: 0 }, @@ -644,7 +644,7 @@ export const slideLeftExitSlower = ({ fromValue = '20px' }: SlideParams): Motion }, }); -export const slideLeftExitUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ +export const leftExitUltraSlow = ({ fromValue = '20px' }: SlideParams): MotionAtom => ({ keyframes: [ { transform: 'translateX(0px)', opacity: 1 }, { transform: `translateX(-${fromValue})`, opacity: 0 },