From 9f9a711fc3dd826fd5b1f3d91dc12502d5018463 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Sun, 16 Mar 2025 08:38:04 -0400 Subject: [PATCH 1/5] refactor(Drawer): Animation timing adjustments --- packages/clerk-js/src/ui/elements/Drawer.tsx | 25 +++++++++++-------- packages/clerk-js/src/ui/foundations/sizes.ts | 1 + 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index d65ebc68991..48297111c1d 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -13,7 +13,6 @@ import { } from '@floating-ui/react'; import * as React from 'react'; -import { transitionDurationValues, transitionTiming } from '../../ui/foundations/transitions'; import { Box, descriptors, Flex, Heading, Icon, useAppearance } from '../customizables'; import { usePrefersReducedMotion } from '../hooks'; import { useScrollLock } from '../hooks/useScrollLock'; @@ -25,6 +24,9 @@ import { IconButton } from './IconButton'; type FloatingPortalProps = React.ComponentProps; +const transitionTimingDuration = 500; +const transitionTimingFunction = 'cubic-bezier(0.32, 0.72, 0, 1)'; + /* ------------------------------------------------------------------------------------------------- * Drawer Context * -----------------------------------------------------------------------------------------------*/ @@ -164,11 +166,11 @@ const Overlay = React.forwardRef((_, ref) => { position: strategy, inset: 0, transitionProperty: 'opacity', - transitionTimingFunction: transitionTiming.slowBezier, + transitionTimingFunction, }, duration: { - open: transitionDurationValues.slower, - close: transitionDurationValues.slow, + open: transitionTimingDuration, + close: transitionTimingDuration, }, }); @@ -202,17 +204,17 @@ const Content = React.forwardRef(({ children }, re const mergedRefs = useMergeRefs([ref, refs.setFloating]); const { isMounted, styles: transitionStyles } = useTransitionStyles(context, { - initial: { transform: 'translateX(100%)' }, - open: { transform: 'translateX(0)' }, - close: { transform: 'translateX(100%)' }, + initial: { transform: `translate3d(var(--transform-offset), 0, 0)` }, + open: { transform: 'translate3d(0, 0, 0)' }, + close: { transform: `translate3d(var(--transform-offset), 0, 0)` }, common: { transitionProperty: 'transform', - transitionTimingFunction: transitionTiming.slowBezier, + transitionTimingFunction, }, duration: isMotionSafe ? { - open: transitionDurationValues.slower, - close: transitionDurationValues.slow, + open: transitionTimingDuration, + close: transitionTimingDuration, } : 0, }); @@ -234,6 +236,9 @@ const Content = React.forwardRef(({ children }, re style={transitionStyles} direction='col' sx={t => ({ + '--transform-offset': + strategy === 'fixed' ? `calc(100% + ${t.space.$3} + ${t.space.$8x75})` : `calc(100% + ${t.space.$8x75})`, + willChange: 'transform', position: strategy, insetBlock: strategy === 'fixed' ? t.space.$3 : 0, insetInlineEnd: strategy === 'fixed' ? t.space.$3 : 0, diff --git a/packages/clerk-js/src/ui/foundations/sizes.ts b/packages/clerk-js/src/ui/foundations/sizes.ts index 6143772ab48..9faf2dded28 100644 --- a/packages/clerk-js/src/ui/foundations/sizes.ts +++ b/packages/clerk-js/src/ui/foundations/sizes.ts @@ -23,6 +23,7 @@ const dynamicSpaceUnits = Object.freeze({ '7x5': '1.875rem', '8': '2rem', '8x5': '2.125rem', + '8x75': '2.1875rem', '9': '2.25rem', '10': '2.5rem', '12': '3rem', From 042ae8382a7d621c7fc44e1e21ef2cc4d5273207 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Sun, 16 Mar 2025 08:42:49 -0400 Subject: [PATCH 2/5] add changeset --- .changeset/tough-nails-explain.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tough-nails-explain.md diff --git a/.changeset/tough-nails-explain.md b/.changeset/tough-nails-explain.md new file mode 100644 index 00000000000..4ad9d303ee9 --- /dev/null +++ b/.changeset/tough-nails-explain.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Adjust the `` enter/exit animations timing and easings. From b82823adbd01ab43274e5f05cc78587f8375f6f9 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 17 Mar 2025 09:36:47 -0400 Subject: [PATCH 3/5] simplify --- packages/clerk-js/src/ui/elements/Drawer.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index 48297111c1d..4f9abb75fc5 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -168,10 +168,7 @@ const Overlay = React.forwardRef((_, ref) => { transitionProperty: 'opacity', transitionTimingFunction, }, - duration: { - open: transitionTimingDuration, - close: transitionTimingDuration, - }, + duration: transitionTimingDuration, }); if (!isMounted) return null; @@ -211,12 +208,7 @@ const Content = React.forwardRef(({ children }, re transitionProperty: 'transform', transitionTimingFunction, }, - duration: isMotionSafe - ? { - open: transitionTimingDuration, - close: transitionTimingDuration, - } - : 0, + duration: isMotionSafe ? transitionTimingDuration : 0, }); if (!isMounted) return null; From f9357da8df1bec604a6a47900c6983af7af8932a Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 17 Mar 2025 09:40:31 -0400 Subject: [PATCH 4/5] add comment --- packages/clerk-js/src/ui/elements/Drawer.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index 4f9abb75fc5..73ea5f07e6e 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -228,6 +228,8 @@ const Content = React.forwardRef(({ children }, re style={transitionStyles} direction='col' sx={t => ({ + // Apply the conditional right offset + the spread of the + // box shadow to ensure it is fully offscreen before unmounting '--transform-offset': strategy === 'fixed' ? `calc(100% + ${t.space.$3} + ${t.space.$8x75})` : `calc(100% + ${t.space.$8x75})`, willChange: 'transform', From e3b0a945eb2c1bd79b2bf857615a9c30587b9a05 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Mon, 17 Mar 2025 12:56:26 -0400 Subject: [PATCH 5/5] extract transition timing/duration --- packages/clerk-js/src/ui/elements/Drawer.tsx | 12 +++++------- packages/clerk-js/src/ui/foundations/transitions.ts | 2 ++ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx index 73ea5f07e6e..574bfc82505 100644 --- a/packages/clerk-js/src/ui/elements/Drawer.tsx +++ b/packages/clerk-js/src/ui/elements/Drawer.tsx @@ -13,6 +13,7 @@ import { } from '@floating-ui/react'; import * as React from 'react'; +import { transitionDurationValues, transitionTiming } from '../../ui/foundations/transitions'; import { Box, descriptors, Flex, Heading, Icon, useAppearance } from '../customizables'; import { usePrefersReducedMotion } from '../hooks'; import { useScrollLock } from '../hooks/useScrollLock'; @@ -24,9 +25,6 @@ import { IconButton } from './IconButton'; type FloatingPortalProps = React.ComponentProps; -const transitionTimingDuration = 500; -const transitionTimingFunction = 'cubic-bezier(0.32, 0.72, 0, 1)'; - /* ------------------------------------------------------------------------------------------------- * Drawer Context * -----------------------------------------------------------------------------------------------*/ @@ -166,9 +164,9 @@ const Overlay = React.forwardRef((_, ref) => { position: strategy, inset: 0, transitionProperty: 'opacity', - transitionTimingFunction, + transitionTimingFunction: transitionTiming.bezier, }, - duration: transitionTimingDuration, + duration: transitionDurationValues.drawer, }); if (!isMounted) return null; @@ -206,9 +204,9 @@ const Content = React.forwardRef(({ children }, re close: { transform: `translate3d(var(--transform-offset), 0, 0)` }, common: { transitionProperty: 'transform', - transitionTimingFunction, + transitionTimingFunction: transitionTiming.bezier, }, - duration: isMotionSafe ? transitionTimingDuration : 0, + duration: isMotionSafe ? transitionDurationValues.drawer : 0, }); if (!isMounted) return null; diff --git a/packages/clerk-js/src/ui/foundations/transitions.ts b/packages/clerk-js/src/ui/foundations/transitions.ts index 55036490418..5ababb0ef22 100644 --- a/packages/clerk-js/src/ui/foundations/transitions.ts +++ b/packages/clerk-js/src/ui/foundations/transitions.ts @@ -6,6 +6,7 @@ const transitionDurationValues = Object.freeze({ focusRing: 200, controls: 100, textField: 450, + drawer: 500, } as const); const toMs = (value: number) => `${value}ms`; @@ -24,6 +25,7 @@ const transitionProperty = Object.freeze({ const transitionTiming = Object.freeze({ common: 'ease', easeOut: 'ease-out', + bezier: 'cubic-bezier(0.32, 0.72, 0, 1)', slowBezier: 'cubic-bezier(0.16, 1, 0.3, 1)', } as const);