feat(docs): add parallax page (#2000)

pmndrs · Oct 22, 2022 · 43de046 · 43de046 · vercel · Oct 22, 2022
1 parent 6b74fed
commit 43de046
Show file tree

Hide file tree

Showing 5 changed files with 236 additions and 4 deletions.
diff --git a/docs/app/data/fixtures.tsx b/docs/app/data/fixtures.tsx
@@ -455,7 +455,7 @@ export const DEFAULT_CONFIG_DATA: CellData[][] = [
     },
     {
       label: 'object | function',
-      content: <code>{`(key: string) => boolean`}</code>,
+      content: <code>{`(key: string) => SpringConfig`}</code>,
     },
     {
       label: 'object',
@@ -589,7 +589,7 @@ export const TRANSITION_CONFIG_DATA: CellData[][] = [
     {
       label: 'object | function',
       content: (
-        <code>{`(item: Item, index: number, state: TransitionPhase) => boolean`}</code>
+        <code>{`(item: Item, index: number, state: TransitionPhase) => SpringConfig`}</code>
       ),
     },
     {
@@ -783,3 +783,95 @@ export const INTERPOLATONS_DATA: CellData[][] = [
     'null',
   ],
 ]
+
+export const PARALLAX_CONFIG_DATA: CellData[][] = [
+  [
+    {
+      label: 'pages',
+      content: (
+        <p>
+          Determines the total space of the inner content where each page takes
+          100% of the visible container.
+        </p>
+      ),
+    },
+    'number',
+    null,
+  ],
+  [
+    {
+      label: 'config',
+      content: (
+        <p>
+          Spring config (mass / tension etc.), see{' '}
+          <a href="/docs/advanced/config">Config</a> for more information.
+        </p>
+      ),
+    },
+    {
+      label: 'object | function',
+      content: <code>{`(key: string) => SpringConfig`}</code>,
+    },
+    {
+      label: 'object',
+      content: <code>{`{ mass: 1, tension: 280, friction: 60 }`}</code>,
+    },
+  ],
+  ['enabled', 'boolean', 'true'],
+  ['horizontal', 'boolean', 'false'],
+  ['innerStyle', 'CSSProperties', null],
+]
+
+export const PARALLAX_LAYER_CONFIG_DATA: CellData[][] = [
+  ['horizontal', 'boolean', null],
+  [
+    {
+      label: 'factor',
+      content: <p>Size of a page, (1=100%, 1.5=1 and 1/2, ...)</p>,
+    },
+    'number',
+    '1',
+  ],
+  [
+    {
+      label: 'offset',
+      content: (
+        <p>
+          Determines where the layer will be at when scrolled to (0=start, 1=1st
+          page, ...)
+        </p>
+      ),
+    },
+    'number',
+    '0',
+  ],
+  [
+    {
+      label: 'speed',
+      content: (
+        <p>
+          Shifts the layer in accordance to its offset, values can be positive
+          or negative
+        </p>
+      ),
+    },
+    'number',
+    '0',
+  ],
+  [
+    {
+      label: 'sticky',
+      content: (
+        <p>
+          Layer will be sticky between these two offsets, all other props are
+          ignored
+        </p>
+      ),
+    },
+    {
+      label: 'StickyConfig',
+      content: <code>{`{ start?: number; end?: number } | undefined`}</code>,
+    },
+    null,
+  ],
+]
diff --git a/docs/app/data/navigationSchema.generated.json b/docs/app/data/navigationSchema.generated.json
@@ -1 +1 @@
-[{"href":"/docs","id":"index","title":"Overview","sidebarPosition":1,"children":[]},{"href":"/docs/getting-started","id":"getting-started","title":"Getting started","sidebarPosition":2,"children":[]},{"href":"/docs/concepts","id":"concepts","noPage":true,"children":[{"id":"animated-elements","title":"Animated Elements","sidebarPosition":1,"children":[],"href":"/docs/concepts/animated-elements","noPage":false},{"id":"controllers-and-springs","title":"Controllers & Springs","sidebarPosition":2,"children":[],"href":"/docs/concepts/controllers-and-springs","noPage":false},{"id":"imperative-api","title":"Imperative API","sidebarPosition":3,"children":[],"href":"/docs/concepts/imperative-api","noPage":false}],"sidebarPosition":3,"title":"Concepts"},{"href":"/docs/components","id":"components","noPage":false,"children":[{"id":"use-spring","title":"useSpring","sidebarPosition":1,"children":[],"href":"/docs/components/use-spring","noPage":false},{"id":"use-springs","title":"useSprings","sidebarPosition":2,"children":[],"href":"/docs/components/use-springs","noPage":false},{"id":"use-transition","title":"useTransition","sidebarPosition":3,"children":[],"href":"/docs/components/use-transition","noPage":false},{"id":"use-chain","title":"useChain","sidebarPosition":4,"children":[],"href":"/docs/components/use-chain","noPage":false},{"id":"use-trail","title":"useTrail","sidebarPosition":5,"children":[],"href":"/docs/components/use-trail","noPage":false}],"sidebarPosition":4,"title":"Components"},{"href":"/docs/advanced","id":"advanced","noPage":true,"children":[{"id":"config","title":"Spring Configs","sidebarPosition":1,"children":[],"href":"/docs/advanced/config","noPage":false},{"id":"events","title":"Events","sidebarPosition":2,"children":[],"href":"/docs/advanced/events","noPage":false},{"id":"controller","title":"Controller","sidebarPosition":3,"children":[],"href":"/docs/advanced/controller","noPage":false},{"id":"spring-value","title":"SpringValue","sidebarPosition":4,"children":[],"href":"/docs/advanced/spring-value","noPage":false},{"id":"spring-ref","title":"SpringRef","sidebarPosition":5,"children":[],"href":"/docs/advanced/spring-ref","noPage":false},{"id":"interpolation","title":"Interpolation","sidebarPosition":6,"children":[],"href":"/docs/advanced/interpolation","noPage":false}],"sidebarPosition":5,"title":"Advanced API"},{"href":"/docs/guides","id":"guides","noPage":true,"children":[{"id":"testing","title":"Testing","sidebarPosition":2,"children":[],"href":"/docs/guides/testing","noPage":false}],"sidebarPosition":6,"title":"Guides"},{"href":"/docs/utilities","id":"utilities","noPage":true,"children":[{"id":"use-isomorphic-layout-effect","title":"useIsomorphicLayout","sidebarPosition":1,"children":[],"href":"/docs/utilities/use-isomorphic-layout-effect","noPage":false},{"id":"use-reduced-motion","title":"useReducedMotion","sidebarPosition":2,"children":[],"href":"/docs/utilities/use-reduced-motion","noPage":false}],"sidebarPosition":7,"title":"Utilities"},{"href":"/docs/typescript","id":"typescript","title":"Typescript","sidebarPosition":8,"children":[]}]
+[{"href":"/docs","id":"index","title":"Overview","sidebarPosition":1,"children":[]},{"href":"/docs/getting-started","id":"getting-started","title":"Getting started","sidebarPosition":2,"children":[]},{"href":"/docs/concepts","id":"concepts","noPage":true,"children":[{"id":"animated-elements","title":"Animated Elements","sidebarPosition":1,"children":[],"href":"/docs/concepts/animated-elements","noPage":false},{"id":"controllers-and-springs","title":"Controllers & Springs","sidebarPosition":2,"children":[],"href":"/docs/concepts/controllers-and-springs","noPage":false},{"id":"imperative-api","title":"Imperative API","sidebarPosition":3,"children":[],"href":"/docs/concepts/imperative-api","noPage":false}],"sidebarPosition":3,"title":"Concepts"},{"href":"/docs/components","id":"components","noPage":false,"children":[{"id":"use-spring","title":"useSpring","sidebarPosition":1,"children":[],"href":"/docs/components/use-spring","noPage":false},{"id":"use-springs","title":"useSprings","sidebarPosition":2,"children":[],"href":"/docs/components/use-springs","noPage":false},{"id":"use-transition","title":"useTransition","sidebarPosition":3,"children":[],"href":"/docs/components/use-transition","noPage":false},{"id":"use-chain","title":"useChain","sidebarPosition":4,"children":[],"href":"/docs/components/use-chain","noPage":false},{"id":"use-trail","title":"useTrail","sidebarPosition":5,"children":[],"href":"/docs/components/use-trail","noPage":false},{"id":"parallax","title":"Parallax","sidebarPosition":6,"children":[],"href":"/docs/components/parallax","noPage":false},{"id":"parallax-layer","title":"Parallax Layer","sidebarPosition":7,"children":[],"href":"/docs/components/parallax-layer","noPage":false}],"sidebarPosition":4,"title":"Components"},{"href":"/docs/advanced","id":"advanced","noPage":true,"children":[{"id":"config","title":"Spring Configs","sidebarPosition":1,"children":[],"href":"/docs/advanced/config","noPage":false},{"id":"events","title":"Events","sidebarPosition":2,"children":[],"href":"/docs/advanced/events","noPage":false},{"id":"controller","title":"Controller","sidebarPosition":3,"children":[],"href":"/docs/advanced/controller","noPage":false},{"id":"spring-value","title":"SpringValue","sidebarPosition":4,"children":[],"href":"/docs/advanced/spring-value","noPage":false},{"id":"spring-ref","title":"SpringRef","sidebarPosition":5,"children":[],"href":"/docs/advanced/spring-ref","noPage":false},{"id":"interpolation","title":"Interpolation","sidebarPosition":6,"children":[],"href":"/docs/advanced/interpolation","noPage":false}],"sidebarPosition":5,"title":"Advanced API"},{"href":"/docs/guides","id":"guides","noPage":true,"children":[{"id":"testing","title":"Testing","sidebarPosition":2,"children":[],"href":"/docs/guides/testing","noPage":false}],"sidebarPosition":6,"title":"Guides"},{"href":"/docs/utilities","id":"utilities","noPage":true,"children":[{"id":"use-isomorphic-layout-effect","title":"useIsomorphicLayout","sidebarPosition":1,"children":[],"href":"/docs/utilities/use-isomorphic-layout-effect","noPage":false},{"id":"use-reduced-motion","title":"useReducedMotion","sidebarPosition":2,"children":[],"href":"/docs/utilities/use-reduced-motion","noPage":false}],"sidebarPosition":7,"title":"Utilities"},{"href":"/docs/typescript","id":"typescript","title":"Typescript","sidebarPosition":8,"children":[]}]