-
Notifications
You must be signed in to change notification settings - Fork 156
Prevent Reversing of Animation? #166
-
Hi there, playing around with the package. Pretty intuitive, thanks for building it!
Is there a way that once the animation is complete, it no longer reverses when scrolling in the opposite way? I noticed the onExit() callback prop but, I'm not sure how to instruct it to go into a 'completed' state
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment 1 reply
-
On exit won't work in this case since it could exit the top of the viewport and not have completed the full animation.
Instead, you can track the progress of that animation, then once it's completed set local state to disable the parallax effect. Not the most elegant solution but it may work for your use case.
function Example() { const [isComplete, setIscomplete] = useState(false); const parallax = useParallax<HTMLDivElement>({ scale: [0, 1], disabled: isComplete, onProgressChange: (x: number) => { if (x >= 1) { setIscomplete(true); } } }); return ( <div className={`test ${isComplete ? " done" : ""}`} ref={parallax.ref}> Test </div> ); }
https://codesandbox.io/s/react-scroll-parallax-disable-after-complete-i18mjm?file=/src/Example.tsx
Beta Was this translation helpful? Give feedback.
All reactions
-
Thank you, that will work for now!
Would be a cool feature for the future ;) Great Package, mate
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1