Can set transition of the component depend on the progress in horizontally scroll?

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

Can set transition of the component depend on the progress in horizontally scroll? #131

Closed ngocducdim closed 2 years ago

ngocducdim commented 2 years ago

Hi I have question, when scrolling horizontally we will have the progress value right? So let said at the progress value 0.1 the <Parallax /> component will have property translateX={1} and at the progress value 0.5 the <Parallax /> component will have property translateX={5}, can we do that? I want implement the animation like below:

jscottsmith commented 2 years ago

@ngocducdim based on the visual, it may be possible. Not quite how you describe -- you must provide start end values for translateX like translateX={['-100%, '0%']} that will correspond to the progress 0 - 1. Since these elements are fixed in view and don't naturally scroll you would have to use startScroll and endScroll config values to determine the progress. I can try and mock something up for you.

jscottsmith commented 2 years ago

@ngocducdim I put together a CodeSandbox

This is probably the closest you can get. The main limitation I see is that there's no ability to set key points along the animation -- only a start and end value. If that works for you then you'll be ok, but if you need more advanced timeline/keyframes then I'd suggest looking at a different library such as GSAP ScrollTrigger.

Let me know if this helps.

ngocducdim commented 2 years ago

Hi sorry for late reply, your demo is nice really helpful for the basic one, I will take a look the GSAP ScrollTrigger, thank you