docs(react-motion): enhance CustomMotion with new easing curves and SoftCloseDrawer examples

Author: robertpenner

packages/react-components/react-motion/stories/src/Motion/CustomMotion.stories.tsx

@@ -90,13 +90,43 @@ const curveGlideRelaxedBounce = `linear(0, .02484 1%, .1036 4%, .2116 8%, .3488
 const curveGlideRelaxedBack = `linear(0, .0396 2%, .1228 6%, .2292 11%, .3807 18%, .5559 26%, .7773 36%, .7992 37%, .82 38%, .8397 39%, .8762 41%, .9088 43%, .9377 45%, .9632 47%, .9853 49%, 1.004 51%, 1.02 53%, 1.034 55%, 1.044 57%, 1.053 59%, 1.059 61%, 1.063 63%, 1.065 65%, 1.066 67%, 1.064 70%, 1.06 73%, 1.053 76%, 1.04 81%, 1.019 88%, 1.009 92%, 1.004 95%, 1.001 98%, 1)`;
 
 // https://robertpenner.com/fuse/#head_type=power-back&tail_type=power-back&join=.501&head_overshoot=0&head_exponent=1.03&tail_overshoot=30&tail_exponent=3.03&show_heatmap=true
-const curveGlideRelaxedBack2 = `linear(0, .04109 3%, .1128 8%, .2304 16%, .3799 26%, .5616 38%, .7758 52%, .899 60%, .9142 61%, .9284 62%, .9414 63%, .9533 64%, .9642 65%, .9829 67%, .9978 69%, 1.009 71%, 1.018 73%, 1.024 75%, 1.027 77%, 1.028 79%, 1.028 81%, 1.025 84%, 1.018 88%, 1.007 93%, 1.003 96%, 1 99%, 1)`;
+const curveGlideRelaxedBack30pct = `linear(0, .04109 3%, .1128 8%, .2304 16%, .3799 26%, .5616 38%, .7758 52%, .899 60%, .9142 61%, .9284 62%, .9414 63%, .9533 64%, .9642 65%, .9829 67%, .9978 69%, 1.009 71%, 1.018 73%, 1.024 75%, 1.027 77%, 1.028 79%, 1.028 81%, 1.025 84%, 1.018 88%, 1.007 93%, 1.003 96%, 1 99%, 1)`;
+
+// https://robertpenner.com/fuse/#head_type=power-back&tail_type=power-back&join=.501&head_overshoot=0&head_exponent=1.03&tail_overshoot=10&tail_exponent=3.03&show_heatmap=true
+const curveGlideRelaxedBack10pct = `linear(0, .02981 2%, .09244 6%, .1888 12%, .3195 20%, .4851 30%, .686 42%, .8209 50%, .8531 52%, .8817 54%, .9069 56%, .929 58%, .948 60%, .9643 62%, .978 64%, .9893 66%, .9984 68%, 1.006 70%, 1.011 72%, 1.014 74%, 1.017 77%, 1.018 80%, 1.015 84%, 1.004 93%, 1.001 97%, 1)`;
+
+// https://robertpenner.com/fuse/#head_type=power-back&tail_type=power-back&join=.302&head_overshoot=0&head_exponent=1.03&tail_overshoot=10&tail_exponent=3.03&show_heatmap=true
+const curveGlideMoreRelaxedBack10pct = `linear(0, .04065 2%, .126 6%, .2353 11%, .3908 18%, .5708 26%, .6839 31%, .7262 33%, .7651 35%, .8007 37%, .8332 39%, .8626 41%, .8892 43%, .913 45%, .9342 47%, .953 49%, .9693 51%, .9835 53%, .9956 55%, 1.006 57%, 1.014 59%, 1.021 61%, 1.026 63%, 1.031 66%, 1.033 69%, 1.033 72%, 1.031 75%, 1.026 79%, 1.009 90%, 1.003 94%, 1.001 97%, 1)`;
+
+// https://robertpenner.com/fuse/#head_type=power-back&tail_type=power-back&join=.202&head_overshoot=0&head_exponent=1.03&tail_overshoot=5&tail_exponent=3.03&show_heatmap=true
+const curveGlideEvenMoreRelaxedBack5pct = `linear(0, .04695 2%, .1207 5%, .2464 10%, .3998 16%, .5288 21%, .5777 23%, .6234 25%, .6659 27%, .7055 29%, .7421 31%, .7759 33%, .807 35%, .8355 37%, .8615 39%, .8852 41%, .9065 43%, .9257 45%, .9428 47%, .9579 49%, .9712 51%, .9827 53%, .9926 55%, 1.001 57%, 1.008 59%, 1.016 62%, 1.021 65%, 1.024 68%, 1.025 71%, 1.023 75%, 1.019 80%, 1.007 90%, 1.002 95%, 1 99%, 1)`;
 
 // EXIT EASINGS
 
 // https://robertpenner.com/fuse/#head_type=power-back&tail_type=bounce&join=.497&head_overshoot=0&head_exponent=.56&bounces=3&decay=90&show_heatmap=true
 const curveSqrtBounce = `linear(0, .1122 1%, .1654 2%, .2076 3%, .2439 4%, .2763 5%, .306 6%, .3336 7%, .3595 8%, .384 9%, .4074 10%, .4511 12%, .4918 14%, .53 16%, .5661 18%, .6005 20%, .6494 23%, .6956 26%, .7395 29%, .7814 32%, .8216 35%, .8729 39%, .922 43%, .969 47%, .9919 49%, .9982 50%, .9868 52%, .9772 54%, .9695 56%, .9638 58%, .9599 60%, .9579 62%, .9578 64%, .9596 66%, .9633 68%, .9689 70%, .9764 72%, .9857 74%, .997 76%, .9982 77%, .9925 79%, .9887 81%, .9868 83%, .9868 85%, .9887 87%, .9925 89%, .9982 91%, .9991 92%, .9965 94%, .9958 96%, .9969 98%, 1)`;
 
+// https://robertpenner.com/fuse/#head_type=power-back&tail_type=power-back&join=.206&head_overshoot=26&head_exponent=2.07&tail_overshoot=0&tail_exponent=3.03&show_heatmap=true
+const curve2TwitchOut = `linear(0, -.02098 2%, -.02946 3%, -.03612 4%, -.04084 5%, -.04353 6%, -.04413 7%, -.0426 8%, -.0389 9%, -.03299 10%, -.02485 11%, -.01445 12%, -.001776 13%, .0132 14%, .03049 15%, .05012 16%, .07209 17%, .09642 18%, .1231 19%, .1522 20%, .2143 22%, .2738 24%, .3302 26%, .3835 28%, .434 30%, .4816 32%, .5264 34%, .5686 36%, .6081 38%, .6452 40%, .6798 42%, .7121 44%, .7422 46%, .77 48%, .7958 50%, .8196 52%, .8414 54%, .8614 56%, .8796 58%, .8961 60%, .9111 62%, .9245 64%, .9365 66%, .952 69%, .9648 72%, .975 75%, .983 78%, .9891 81%, .9947 85%, .9979 89%, .9997 94%, 1)`;
+
+// https://robertpenner.com/fuse/#head_type=bezier&tail_type=power-back&head_bezier_x1=.24&head_bezier_y1=1.66&head_bezier_x2=.32&head_bezier_y2=-.1&tail_overshoot=0&tail_exponent=1.04&show_heatmap=true&tail_enabled=false
+const curveOutIn = `linear(0, .06781 1%, .1328 2%, .1949 3%, .2539 4%, .3097 5%, .3622 6%, .4114 7%, .4572 8%, .4995 9%, .5382 10%, .5735 11%, .6052 12%, .6335 13%, .6585 14%, .6802 15%, .6987 16%, .7143 17%, .7271 18%, .7373 19%, .7451 20%, .7506 21%, .7542 22%, .7559 23%, .7561 24%, .7548 25%, .7523 26%, .7443 28%, .7333 30%, .7135 33%, .6783 38%, .6588 41%, .6472 43%, .637 45%, .6283 47%, .6213 49%, .616 51%, .6126 53%, .6109 55%, .6111 57%, .613 59%, .6168 61%, .6223 63%, .6296 65%, .6386 67%, .6492 69%, .6615 71%, .6754 73%, .6909 75%, .7078 77%, .7263 79%, .7462 81%, .7674 83%, .7901 85%, .8265 88%, .8659 91%, .9079 94%, .9527 97%, 1)`;
+
+// https://robertpenner.com/fuse/#head_type=bezier&tail_type=power-back&join=.57&head_bezier_x1=.28&head_bezier_y1=1.56&head_bezier_x2=.47&head_bezier_y2=.11&tail_overshoot=0&tail_exponent=3.03&duration=1500&show_heatmap=true
+const curveBezierOutInCubicOut = `linear(0, .06665 1%, .1286 2%, .1858 3%, .2383 4%, .2861 5%, .3292 6%, .3677 7%, .4018 8%, .4316 9%, .4572 10%, .4789 11%, .4969 12%, .5115 13%, .523 14%, .5316 15%, .5376 16%, .5413 17%, .543 18%, .5429 19%, .5415 20%, .5352 22%, .5261 24%, .5054 28%, .4963 30%, .4892 32%, .4848 34%, .4837 36%, .4861 38%, .4922 40%, .5024 42%, .5089 43%, .5165 44%, .5251 45%, .5347 46%, .5453 47%, .5569 48%, .5832 50%, .6134 52%, .6475 54%, .6854 56%, .726 58%, .7636 60%, .7976 62%, .8282 64%, .8555 66%, .8798 68%, .9011 70%, .9198 72%, .9359 74%, .9497 76%, .9614 78%, .9711 80%, .979 82%, .9853 84%, .9922 87%, .9965 90%, .9992 94%, 1)`;
+
+// https://robertpenner.com/fuse/#head_type=power-back&tail_type=bezier&join=.303&head_overshoot=0&head_exponent=2&tail_bezier_x1=.06&tail_bezier_y1=.51&tail_bezier_x2=.24&tail_bezier_y2=.53&duration=1500
+const curveQuadraticToSoftClose = `linear(0, .0006991 1%, .002796 2%, .006292 3%, .01119 4%, .01748 5%, .02517 6%, .03426 7%, .04474 8%, .05663 9%, .06991 10%, .08459 11%, .1007 12%, .1181 13%, .137 14%, .1573 15%, .179 16%, .202 17%, .2265 18%, .2524 19%, .2796 20%, .3083 21%, .3384 22%, .3698 23%, .4027 24%, .4369 25%, .4726 26%, .5096 27%, .5481 28%, .5879 29%, .6292 30%, .668 31%, .6954 32%, .7157 33%, .7318 34%, .745 35%, .7562 36%, .7659 37%, .7823 39%, .7957 41%, .8073 43%, .8222 46%, .8392 50%, .8579 55%, .8815 62%, .981 94%, 1)`;
+
+// https://robertpenner.com/fuse/#head_type=power-back&tail_type=bezier&join=.303&head_overshoot=0&head_exponent=1&tail_bezier_x1=.06&tail_bezier_y1=.51&tail_bezier_x2=.24&tail_bezier_y2=.53&duration=1500
+const curveLinearToSoftClose = `linear(0, .774 30%, .7977 31%, .8144 32%, .8268 33%, .8366 34%, .8446 35%, .8574 37%, .8673 39%, .8792 42%, .8916 46%, .9044 51%, .9218 59%, .9961 98%, 1)`;
+
+// http://localhost:3000/#head_type=power-back&tail_type=bezier&join=.403&head_overshoot=10&head_exponent=2.5&tail_bezier_x1=.06&tail_bezier_y1=.51&tail_bezier_x2=.24&tail_bezier_y2=.53&duration=2000
+const curveBackToSoftClose1 = `linear(0, -.002844 1%, -.01341 3%, -.03805 7%, -.04837 9%, -.05577 11%, -.05807 12%, -.05931 13%, -.0594 14%, -.05823 15%, -.05573 16%, -.05181 17%, -.0464 18%, -.03943 19%, -.03082 20%, -.0205 21%, -.008402 22%, .00553 23%, .02136 24%, .03916 25%, .05897 26%, .08086 27%, .1049 28%, .1311 29%, .1596 30%, .1903 31%, .2234 32%, .2589 33%, .2968 34%, .3373 35%, .3802 36%, .4258 37%, .474 38%, .5249 39%, .5785 40%, .629 41%, .663 42%, .6876 43%, .7067 44%, .7222 45%, .7352 46%, .7465 47%, .7565 48%, .7736 50%, .7881 52%, .8066 55%, .8228 58%, .8422 62%, .8686 68%, .975 94%, 1)`;
+
+// http://localhost:3000/#head_type=power-back&tail_type=bezier&join=.257&head_overshoot=0&head_exponent=1.5&tail_bezier_x1=.03&tail_bezier_y1=.31&tail_bezier_x2=.08&tail_bezier_y2=.48&duration=1200
+const curvePower1_5ToSoftClose = `http://localhost:3000/#head_type=power-back&tail_type=bezier&join=.257&head_overshoot=0&head_exponent=1.5&tail_bezier_x1=.03&tail_bezier_y1=.31&tail_bezier_x2=.08&tail_bezier_y2=.48&duration=1200`;
+
 // --- Custom motion for Drawer ---
 
 const CustomSlideMotion = createPresenceComponent(() => {
@@ -105,14 +135,60 @@ const CustomSlideMotion = createPresenceComponent(() => {
       // Slide in from the left
       keyframes: [{ translate: '-100% 0' }, { translate: '0 0' }],
       duration: motionTokens.durationUltraSlow * 2,
-      easing: curveGlideRelaxedBack2,
+      // easing: curveGlideRelaxedBack30pct,
+      // easing: curveGlideRelaxedBack10pct,
+      // easing: curveGlideMoreRelaxedBack10pct,
+      easing: curveGlideEvenMoreRelaxedBack5pct,
     },
     exit: {
       // Slide out to the left
       keyframes: [{ translate: '0 0' }, { translate: '-100% 0' }],
+      duration: motionTokens.durationUltraSlow * 4,
+      easing: curveQuadraticToSoftClose,
+      // easing: curveLinearToSoftClose,
+      // easing: curveBackToSoftClose1,
+    },
+  };
+});
+
+const SoftCloseDrawerMotion = createPresenceComponent(() => {
+  return {
+    enter: {
+      // Slide in from the left
+      keyframes: [{ translate: '-100% 0' }, { translate: '0 0' }],
+      duration: motionTokens.durationUltraSlow * 3,
+      easing: curveGlideRelaxedBack30pct,
+    },
+    exit: {
+      // Slide out to the left with a soft close
+      keyframes: [
+        { translate: '0 0', easing: 'ease-in' },
+        { translate: '-80% 0', easing: 'ease-out', offset: 0.3 },
+        { translate: '-100% 0', offset: 1 },
+      ],
+      duration: motionTokens.durationUltraSlow * 6,
+      // easing: curveOutIn,
+    },
+  };
+});
+
+const SoftCloseDrawerMotion2 = createPresenceComponent(() => {
+  return {
+    enter: {
+      // Slide in from the left
+      keyframes: [{ translate: '-100% 0' }, { translate: '0 0' }],
       duration: motionTokens.durationUltraSlow * 2,
-      // easing: motionTokens.curveAccelerateMid,
-      easing: curveSqrtBounce,
+      easing: curveGlideRelaxedBack30pct,
+    },
+    exit: {
+      // Slide out to the left with a soft close
+      keyframes: [
+        { translate: '0 0' },
+        // { translate: '-70% 0', easing: 'linear', offset: 0.3 },
+        { translate: '-100% 0' },
+      ],
+      duration: motionTokens.durationUltraSlow * 3,
+      easing: 'linear(0, 30% .7, 1)',
     },
   };
 });
@@ -151,6 +227,7 @@ const useStyles = makeStyles({
     borderRadius: tokens.borderRadiusMedium,
     overflow: 'hidden',
     display: 'flex',
+    flexDirection: 'column-reverse',
     height: '300px',
     backgroundColor: tokens.colorNeutralBackground1,
   },
@@ -246,8 +323,10 @@ const DrawerExample = () => {
       <div className={classes.drawerContainer}>
         <InlineDrawer
           surfaceMotion={{ children: (_, props) => <CustomSlideMotion {...props} /> }}
+          // surfaceMotion={{ children: (_, props) => <SoftCloseDrawerMotion {...props} /> }}
           separator
           open={isOpen}
+          style={{ backgroundColor: tokens.colorNeutralBackground4, marginLeft: '-5%', paddingLeft: '5%' }}
         >
           <DrawerHeader>
             <DrawerHeaderTitle