From 945987b9b6f6a2ea968b61c7eb9b82e836b56bbb Mon Sep 17 00:00:00 2001 From: J Scott Smith Date: Sat, 16 Mar 2024 23:43:00 -0700 Subject: [PATCH] chore: update docs to warn about sticky #243 --- documentation/docs/examples/how-it-works.mdx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/documentation/docs/examples/how-it-works.mdx b/documentation/docs/examples/how-it-works.mdx index 42fdf34d7..f11df5949 100644 --- a/documentation/docs/examples/how-it-works.mdx +++ b/documentation/docs/examples/how-it-works.mdx @@ -39,13 +39,18 @@ All effects are applied based on the original element's progress. Progress begin -:::info +## Altering Progress By design and by default, all elements progress relative to the view. However, there are optional ways to change how progress is calculated: 1. Manually setting [`startScroll` and `endScroll`](/docs/usage/parallax-props#configuration-props) props allows complete control over when the progress starts and ends. -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. -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. +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. +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. +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. + +:::warning + +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. :::