Stop the effect at a given position about react-scroll-parallax HOT 7 CLOSED

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.

from react-scroll-parallax.

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

from react-scroll-parallax.

Something like this?

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

from react-scroll-parallax.

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

from react-scroll-parallax.

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/

from react-scroll-parallax.

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.

from react-scroll-parallax.

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

from react-scroll-parallax.