Stop the effect at a given position

[hawret]

You can already decide when the animation begins with targetElement & rootMargin, but not when it should end. The option startScroll, endScroll isn't friendly with responsiveness. The progress could be paused when reaching a certain point and then resumed when scrolling up.

onProgressChange: n => {
  if (n > 0.55) {
     parallax.controller.pause()
  } else {
     parallax.controller.resume()
  }
}

or endScroll could indicate the progress e.g. 0.55

Is there a hack way that I could do right now?

Related https://github.com/jscottsmith/react-scroll-parallax/issues/133

[jscottsmith]

targetElement could also be used to end an animation early, just depends how the target is positioned.

It would help to know the exact effect that you're trying to achieve, then I could show you how it might be done with this library, or advise to use something else instead.

[hawret]

Thank you for the quick answer :)

The green block should stop at the end of the purple https://codesandbox.io/s/react-scroll-parallax-target-element-forked-wy97bc?file=/src/styles.css

[jscottsmith]

Something like this?

https://codesandbox.io/s/react-scroll-parallax-target-element-stop-early-nev746?file=/src/App.tsx

[hawret]

It should start in the middle (my example) and end at the bottom of purple

[hawret]

This is a good example https://react-scroll-parallax-examples.vercel.app/ At the end, how would you stop the animation when the circles are aligned? Or stopping the letters here https://react-scroll-parallax.netlify.app/

[jscottsmith]

I'm just guessing here ;-)

Updated the CodeSandbox: https://codesandbox.io/s/react-scroll-parallax-target-element-stop-early-nev746?file=/src/styles.css

They stop animating when the target is out of view and they are aligned because of their ending CSS position is aligned and no transform styles are used at the end of the effect translateY={[-200, 0]}.

Beyond that it's up to you to provide the correct styling to make it fit your specific needs.

[hawret]

That works, thanks! :))

A better API for this would be startScroll accepting self and add two others: duration and offset

// before translateY changes the original position
// I think `window.addEventListener('load', ...)` is required here
const start = window.pageYOffset + element.getBoundingClientRect().top
...
startScroll: (start - offset) 
endScroll: (start - offset) + duration