Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stop the effect at a given position #212

Closed
hawret opened this issue Apr 7, 2023 · 7 comments
Closed

Stop the effect at a given position #212

hawret opened this issue Apr 7, 2023 · 7 comments
Labels

Comments

@hawret
Copy link

hawret commented Apr 7, 2023

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 #133

@jscottsmith
Copy link
Owner

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
Copy link
Author

hawret commented Apr 9, 2023

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
Copy link
Owner

@hawret
Copy link
Author

hawret commented Apr 13, 2023

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

@hawret
Copy link
Author

hawret commented Apr 14, 2023

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
Copy link
Owner

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
Copy link
Author

hawret commented Apr 17, 2023

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

@hawret hawret closed this as completed Apr 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants