Skip to content

Commit 56d6d41

Browse files
committed
chore: update docs to warn about sticky #243
1 parent 64d6a50 commit 56d6d41

File tree

1 file changed

+8
-3
lines changed

1 file changed

+8
-3
lines changed

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,18 @@ All effects are applied based on the original element's progress. Progress begin
3939

4040
<ElementProgress />
4141

42-
:::info
42+
## Altering Progress
4343

4444
By design and by default, all elements progress relative to the view. However, there are optional ways to change how progress is calculated:
4545

4646
1. Manually setting [`startScroll` and `endScroll`](/docs/usage/parallax-props#configuration-props) props allows complete control over when the progress starts and ends.
47-
2. Setting a [`rootMargin`](/docs/usage/parallax-props#configuration-props) will add a invisible margin around the element that can be used to change when the element is in view and its progress.
48-
3. You can also set [`shouldAlwaysCompleteAnimation`](/docs/usage/parallax-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.
47+
2. Use a [`targetElement`](/docs/usage/parallax-props#configuration-props) which will track the progress of the target and apply it to the current element.
48+
3. Setting a [`rootMargin`](/docs/usage/parallax-props#configuration-props) will add a invisible margin around the element that can be used to change when the element is in view and its progress.
49+
4. You can also set [`shouldAlwaysCompleteAnimation`](/docs/usage/parallax-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.
50+
51+
:::warning
52+
53+
Because progress is relative to the view, and [Parallax Controller caches](https://parallax-controller.damnthat.tv/docs/performance#optimizations-to-reduce-jank) the elements position, unexpected issues will occur if you use parallax on a sticky positioned element. If you need to use parallax on a sticky element, consider using a `targetElement` that is not sticky, or predefined `startScroll` and `endScroll` values.
4954

5055
:::
5156

0 commit comments

Comments
 (0)