refactor(clerk-js): <Drawer /> animation timing/easing adjustments (#5369)

Author: alexcarpenter

.changeset/tough-nails-explain.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Adjust the `<Drawer />` enter/exit animations timing and easings.

packages/clerk-js/src/ui/elements/Drawer.tsx

@@ -164,12 +164,9 @@ const Overlay = React.forwardRef<HTMLDivElement>((_, ref) => {
       position: strategy,
       inset: 0,
       transitionProperty: 'opacity',
-      transitionTimingFunction: transitionTiming.slowBezier,
-    },
-    duration: {
-      open: transitionDurationValues.slower,
-      close: transitionDurationValues.slow,
+      transitionTimingFunction: transitionTiming.bezier,
     },
+    duration: transitionDurationValues.drawer,
   });
 
   if (!isMounted) return null;
@@ -202,19 +199,14 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ 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: transitionTiming.bezier,
     },
-    duration: isMotionSafe
-      ? {
-          open: transitionDurationValues.slower,
-          close: transitionDurationValues.slow,
-        }
-      : 0,
+    duration: isMotionSafe ? transitionDurationValues.drawer : 0,
   });
 
   if (!isMounted) return null;
@@ -234,6 +226,11 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ 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',
             position: strategy,
             insetBlock: strategy === 'fixed' ? t.space.$3 : 0,
             insetInlineEnd: strategy === 'fixed' ? t.space.$3 : 0,

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',

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);