Skip to content

Commit 1b16df2

Browse files
committed
docs: info about progress calculation
1 parent 8b7be8d commit 1b16df2

File tree

1 file changed

+9
-0
lines changed

1 file changed

+9
-0
lines changed

documentation/docs/examples/how-it-works.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,15 @@ All effects are applied based on the original element's progress. Progress begin
3131

3232
<ElementProgress />
3333

34+
:::info
35+
36+
By design and by default, all elements progress relative to the view. However, there are optional ways to change how progress is calculated:
37+
38+
1. Manually setting [`startScroll` and `endScroll`](https://parallax-controller.v1.damnthat.tv/docs/usage/props#configuration-props) props allows complete control over when the progress starts and ends.
39+
2. You can also set [`shouldAlwaysCompleteAnimation`](https://parallax-controller.v1.damnthat.tv/docs/usage/props#configuration-props) to true and 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.
40+
41+
:::
42+
3443
## Beyond Parallax: CSS effects
3544

3645
Additional CSS effects, like opacity, scale and rotation can be applied based on progress, even with some easing.

0 commit comments

Comments
 (0)