Prevent Reversing of Animation?

[kirill-develops]

Hi there, playing around with the package. Pretty intuitive, thanks for building it!

Is there a way that once the animation is complete, it no longer reverses when scrolling in the opposite way? I noticed the onExit() callback prop but, I'm not sure how to instruct it to go into a 'completed' state

[jscottsmith]

On exit won't work in this case since it could exit the top of the viewport and not have completed the full animation.

Instead, you can track the progress of that animation, then once it's completed set local state to disable the parallax effect. Not the most elegant solution but it may work for your use case.

function Example() {
  const [isComplete, setIscomplete] = useState(false);
  const parallax = useParallax<HTMLDivElement>({
    scale: [0, 1],
    disabled: isComplete,
    onProgressChange: (x: number) => {
      if (x >= 1) {
        setIscomplete(true);
      }
    }
  });
  return (
    <div className={`test ${isComplete ? " done" : ""}`} ref={parallax.ref}>
      Test
    </div>
  );
}

https://codesandbox.io/s/react-scroll-parallax-disable-after-complete-i18mjm?file=/src/Example.tsx

[kirill-develops]

Thank you, that will work for now!

Would be a cool feature for the future ;) Great Package, mate