diff --git a/packages/blade/src/components/Slide/Slide.web.tsx b/packages/blade/src/components/Slide/Slide.web.tsx index 67501a10bcd..2fef1bbe78b 100644 --- a/packages/blade/src/components/Slide/Slide.web.tsx +++ b/packages/blade/src/components/Slide/Slide.web.tsx @@ -6,20 +6,23 @@ import { cssBezierToMotionFn } from '~utils/cssBezierToMotionFn'; import { castWebType, useTheme } from '~utils'; import type { SlideProps } from './types'; -const getFromTransform = (direction: SlideProps['direction']): `translate${string}` => { +const getFromTransform = ( + direction: SlideProps['direction'], + fromOffset: SlideProps['fromOffset'], +): `translate${string}` => { if (direction === 'top') { - return 'translateY(-100vh)'; + return `translateY(-${fromOffset})`; } if (direction === 'left') { - return 'translateX(-100vw)'; + return `translateX(-${fromOffset})`; } if (direction === 'right') { - return 'translateX(100vw)'; + return `translateX(${fromOffset})`; } - return 'translateY(100vh)'; + return `translateY(${fromOffset})`; }; export const Slide = ({ @@ -29,6 +32,7 @@ export const Slide = ({ isVisible, motionTriggers, shouldUnmountWhenHidden, + fromOffset, }: SlideProps) => { const { theme } = useTheme(); @@ -41,19 +45,21 @@ export const Slide = ({ const enterDirection = typeof direction === 'object' ? direction.enter : direction; const exitDirection = typeof direction === 'object' ? direction.exit : direction; - const enterTransform = getFromTransform(enterDirection); - const exitTransform = getFromTransform(exitDirection); - const isEnterDirectionHorizontal = ['left', 'right'].includes(enterDirection); const isExitDirectionHorizontal = ['left', 'right'].includes(exitDirection); + const defaultOffset: SlideProps['fromOffset'] = isEnterDirectionHorizontal ? '100vw' : '100vh'; + + const enterTransform = getFromTransform(enterDirection, fromOffset ?? defaultOffset); + const exitTransform = getFromTransform(exitDirection, fromOffset ?? defaultOffset); + return { enterTransform, exitTransform, isEnterDirectionHorizontal, isExitDirectionHorizontal, }; - }, [direction]); + }, [direction, fromOffset]); const moveVariants: MotionVariantsType = { initial: { diff --git a/packages/blade/src/components/Slide/types.ts b/packages/blade/src/components/Slide/types.ts index bee4be598ae..e3c14b4d4a4 100644 --- a/packages/blade/src/components/Slide/types.ts +++ b/packages/blade/src/components/Slide/types.ts @@ -9,4 +9,6 @@ export type SlideProps = BaseMotionEntryExitProps & { enter: SlideDirections; exit: SlideDirections; }; + + fromOffset?: `100vh` | `100vw` | `${number}%`; };