Skip to content

Commit c3de430

Browse files
jscottsmithjscottsmith
committed
add support for shouldStartAnimationInitialInView option
1 parent 9753d31 commit c3de430

File tree

4 files changed

+53
-11
lines changed

4 files changed

+53
-11
lines changed

‎docs/parallax-component.md

+12-11
Original file line numberDiff line numberDiff line change
@@ -51,17 +51,18 @@ The following are all props that can be passed to the `<Parallax>` component:
5151

5252
### Props: Configuration
5353

54-
| Name | Type | Default | Description |
55-
| -------------- | :--------------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
56-
| **speed** | `number` | | A value representing the elements scroll speed. If less than zero scroll will appear slower. If greater than zero scroll will appear faster. |
57-
| **easing** | `string` or `number[]` | | String representing an [easing preset](#easing-presets) or array of params to supply to a [cubic bezier easing function](#cubic-bezier-easing-function). |
58-
| **rootMargin** | `object` | | Margin to be applied as the bounds around an element. This will affect when an element is determined to be considered in the viewport. Example: `{ top: 100, right: 100, bottom: 100, left: 100 }` |
59-
| **className** | `string` | | Optionally pass additional class names to be added to the outermost parallax element. |
60-
| **disabled** | `boolean` | `false` | Disables parallax effects on individual elements when `true`. |
61-
| **styleInner** | `object` | | Optionally pass a style object to be added to the innermost parallax element. |
62-
| **styleOuter** | `object` | | Optionally pass a style object to be added to the outermost parallax element. |
63-
| **tagInner** | `string` | `div` | Optionally pass an element tag name to be applied to the innermost parallax element. |
64-
| **tagOuter** | `string` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. |
54+
| Name | Type | Default | Description |
55+
| ------------------------------------- | :--------------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
56+
| **speed** | `number` | | A value representing the elements scroll speed. If less than zero scroll will appear slower. If greater than zero scroll will appear faster. |
57+
| **easing** | `string` or `number[]` | | String representing an [easing preset](#easing-presets) or array of params to supply to a [cubic bezier easing function](#cubic-bezier-easing-function). |
58+
| **rootMargin** | `object` | | Margin to be applied as the bounds around an element. This will affect when an element is determined to be considered in the viewport. Example: `{ top: 100, right: 100, bottom: 100, left: 100 }` |
59+
| **className** | `string` | | Optionally pass additional class names to be added to the outermost parallax element. |
60+
| **disabled** | `boolean` | `false` | Disables parallax effects on individual elements when `true`. |
61+
| **styleInner** | `object` | | Optionally pass a style object to be added to the innermost parallax element. |
62+
| **styleOuter** | `object` | | Optionally pass a style object to be added to the outermost parallax element. |
63+
| **tagInner** | `string` | `div` | Optionally pass an element tag name to be applied to the innermost parallax element. |
64+
| **tagOuter** | `string` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. |
65+
| **shouldStartAnimationInitialInView** | `boolean` | `false` | Will start the animation at initial element position if the element is positioned inside the view when scroll is at zero. |
6566

6667
### Props: CSS Effects
6768

‎src/components/Parallax/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
5252
opacity: props.opacity,
5353
easing: props.easing,
5454
rootMargin: props.rootMargin,
55+
shouldStartAnimationInitialInView:
56+
props.shouldStartAnimationInitialInView,
5557
onProgressChange: props.onProgressChange,
5658
onEnter: props.onEnter,
5759
onExit: props.onExit,

‎src/components/Parallax/types.ts

+4
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,10 @@ export interface ParallaxProps {
147147
* Example: rootMargin={{ top: 100, right: 100, bottom: 100, left: 100 }}
148148
*/
149149
rootMargin?: RootMarginShape;
150+
/**
151+
* Will start the animation at initial element position if the element is positioned inside the view when scroll is at zero
152+
*/
153+
shouldStartAnimationInitialInView?: boolean;
150154
/**
151155
* Optionally pass additional class names to be added to the outermost parallax element.
152156
*/

‎stories/Parallax/1_ParallaxVertical.stories.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,41 @@ WithVaryingXOffsets.args = {
137137
MinOffset: -50,
138138
};
139139

140+
export const StartAnimationAtInitialPosition = (args) => {
141+
const amount = 10;
142+
const unit = 'px';
143+
const elements = new Array(amount).fill(null).map((x, i) => i);
144+
145+
return (
146+
<ParallaxProvider>
147+
<div className="w-full flex" style={{ height: '300vh' }}>
148+
<div className="w-full flex flex-col items-center">
149+
{elements.map((_, i) => {
150+
return (
151+
<Parallax
152+
key={i}
153+
className={styles.smallLinear}
154+
translateX={[
155+
`${args.startTranslateX}${unit}`,
156+
`${args.endTranslateX}${unit}`,
157+
]}
158+
shouldStartAnimationInitialInView
159+
>
160+
<Element name={i} />
161+
</Parallax>
162+
);
163+
})}
164+
</div>
165+
</div>
166+
</ParallaxProvider>
167+
);
168+
};
169+
170+
StartAnimationAtInitialPosition.args = {
171+
startTranslateX: 80,
172+
endTranslateX: -80,
173+
};
174+
140175
export const WithAHundredElements = () => {
141176
const amount = 100;
142177
const offset = 50;

0 commit comments

Comments
 (0)