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

[ngocducdim]

• 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:
  

[J Scott Smith]

@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.

[J Scott Smith]

@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]

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