search

jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
https://react-scroll-parallax.damnthat.tv/
MIT License
2.9k stars 158 forks source link

Making parallax move to end and back #200

Closed asjustis closed 1 year ago

asjustis commented 1 year ago

Support

Hi, while scrolling through, I want to use Parallax to either move to the end position and then into the start position, or for opacity - from 0 to 1 and back to 0. Is this something that is possible with the <Parallax> element?

jscottsmith commented 1 year ago

Sorry this isn't supported.

Try something like Framer Motion or GSAP ScrollTrigger for more advanced scroll animations.

asjustis commented 1 year ago

Got it, thanks. I did a dirty hacky workaround for this if anyone will be curious anytime:

<Parallax
    onProgressChange={(newProgress) => {
    if (progress < 0.5 && newProgress >= 0.5) {
    setOpacity([2, 0, easing]);
    } else if (progress >= 0.5 && newProgress < 0.5) {
    setOpacity([0, 2, easing]);
    }
    ...
}>
...