docs(motion): touch up experiments for presentation

Author: robertpenner

packages/react-components/react-motion-components-preview/stories/src/Experiments/ExperimentsBlur.stories.tsx

@@ -123,7 +123,7 @@ export const ExperimentsBlur = () => {
 ExperimentsBlur.parameters = {
   docs: {
     description: {
-      story: description,
+      // story: description,
     },
   },
 };

packages/react-components/react-motion-components-preview/stories/src/Experiments/ExperimentsDescription.md

@@ -1,7 +1 @@
-[Experiments description]
-
 > **⚠️ Preview components are considered unstable**
-
-```tsx
-// example code
-```

packages/react-components/react-motion-components-preview/stories/src/Experiments/ExperimentsReverseSlower.stories.tsx

@@ -225,10 +225,7 @@ export const ExperimentsReverseSlower = () => {
 
     return (
       <div>
-        <p>
-          The mouse down animation is reused for mouse up, <br />
-          but in reverse and slower.
-        </p>
+        <p>The mouse down animation is reused for mouse up, but in reverse and slower.</p>
         {content}
       </div>
     );

packages/react-components/react-motion-components-preview/stories/src/Experiments/ExperimentsSlideUnder.stories.tsx

@@ -130,13 +130,14 @@ export const ExperimentsSlideUnder = () => {
           <option>-50%</option>
         </Select>
 
-        <Field className={classes.field}>
+        {/* Not working with animateOpacity false */}
+        {/* <Field className={classes.field}>
           <Switch
             label={<code>animateOpacity</code>}
             checked={animateOpacity}
             onChange={() => setAnimateOpacity(v => !v)}
           />
-        </Field>
+        </Field> */}
       </div>
       <div className={classes.card}>
         <SlideUnder visible={visible} orientation={orientation} distance={distance} animateOpacity={animateOpacity}>

packages/react-components/react-motion-components-preview/stories/src/Experiments/ExperimentsWipe.stories.tsx

@@ -137,13 +137,14 @@ export const ExperimentsWipe = () => {
           <Label aria-hidden>{durationMax}</Label>
         </div>
 
-        <Field className={classes.field}>
+        {/* It's not working with animateOpacity false */}
+        {/* <Field className={classes.field}>
           <Switch
             label={<code>animateOpacity</code>}
             checked={animateOpacity}
             onChange={() => setAnimateOpacity(v => !v)}
           />
-        </Field>
+        </Field> */}
 
         {/* <Label htmlFor={radiusSliderId}>radius: {radius}</Label>
         <div className={classes.sliderWrapper}>