Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(docs): add parallax page #2000

Merged
merged 5 commits into from
Oct 22, 2022
Merged

feat(docs): add parallax page #2000

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
30fddf7
feat: add parallax page
joshuaellis Oct 16, 2022
8d5358d
feat: add parallax layer page
joshuaellis Oct 16, 2022
f4a8552
chore: update nav schemas
joshuaellis Oct 16, 2022
5511a2a
Merge branch 'beta-docs' into feat/beta-docs/parallax
joshuaellis Oct 22, 2022
af7be5d
chore: fix schemas
joshuaellis Oct 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
96 changes: 94 additions & 2 deletions docs/app/data/fixtures.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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>
),
},
{
Expand Down Expand Up @@ -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,
],
]
2 changes: 1 addition & 1 deletion docs/app/data/navigationSchema.generated.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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":[]}]