Skip to content

Commit

Permalink
docs: add targetElement to props documentation #154
Browse files Browse the repository at this point in the history
  • Loading branch information
@jscottsmith
jscottsmith committed Apr 23, 2022
1 parent 5cd2024 commit 26dbec1
Showing 1 changed file with 11 additions and 10 deletions.
21 changes: 11 additions & 10 deletions documentation/docs/usage/parallax-props.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,16 +42,17 @@ Example with **`<ParallaxBanner />`**

The following properties can be provided to configure the scroll animation:

| Name | Type | Default | Description |
| ------------------------------------ | :--------------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **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. |
| **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). |
| **rootMargin** | `object` | | Margin to be applied as the bounds around an element. This will affect when an element is determined to be in the viewport. Example: `{ top: 100, right: 100, bottom: 100, left: 100 }` |
| **disabled** | `boolean` | `false` | Disables parallax effects on individual elements when `true`. |
| **shouldAlwaysCompleteAnimation** | `boolean` | `false` | Always start and end animations at the given effect values - if the element is positioned inside the view when scroll is at zero or ends in view at final scroll position, the initial and final positions are used to determine progress instead of the scroll view size. |
| **shouldDisableScalingTranslations** | `boolean` | `false` | Enable scaling translations - translate effects that cause the element to appear in the view longer must be scaled up so that animation doesn't end early. |
| **startScroll** | `number` | | Scroll top value to begin the animation. When provided along with `endScroll` relative scroll values will be ignored. |
| **endScroll** | `number` | | Scroll top value to end the animation. When provided along with `startScroll` relative scroll values will be ignored. |
| Name | Type | Default | Description |
| ------------------------------------ | :--------------------: | :------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **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. |
| **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). |
| **rootMargin** | `object` | | Margin to be applied as the bounds around an element. This will affect when an element is determined to be in the viewport. Example: `{ top: 100, right: 100, bottom: 100, left: 100 }` |
| **disabled** | `boolean` | `false` | Disables parallax effects on individual elements when `true`. |
| **shouldAlwaysCompleteAnimation** | `boolean` | `false` | Always start and end animations at the given effect values - if the element is positioned inside the view when scroll is at zero or ends in view at final scroll position, the initial and final positions are used to determine progress instead of the scroll view size. |
| **shouldDisableScalingTranslations** | `boolean` | `false` | Enable scaling translations - translate effects that cause the element to appear in the view longer must be scaled up so that animation doesn't end early. |
| **startScroll** | `number` | | Scroll top value to begin the animation. When provided along with `endScroll` relative scroll values will be ignored. |
| **endScroll** | `number` | | Scroll top value to end the animation. When provided along with `startScroll` relative scroll values will be ignored. |
| **targetElement** | `HTMLElement` | | Provides an element to track and determine the scroll progress. Use when scroll progress should be independent of parallax element's original position. See [storybook for example]https://react-scroll-parallax-v3.surge.sh/?path=/story/components-parallax-vertical-scroll--with-defined-target-element). |

## CSS Effect Props

Expand Down

1 comment on commit 26dbec1

@vercel
Copy link

@vercel vercel bot commented on 26dbec1 Apr 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

react-scroll-parallax – ./

react-scroll-parallax-jscottsmith.vercel.app
react-scroll-parallax-git-master-jscottsmith.vercel.app
react-scroll-parallax.vercel.app
react-scroll-parallax.damnthat.tv
react-scroll-parallax.v3.damnthat.tv

Please sign in to comment.