React Spring useInView has "once" property that can be used to trigger animation again whenever it is out of the viewport.
const [a, springs] = useInView( () => ({ from: { opacity: 0, x: 100, }, to: { opacity: 1, x: 0, }, }), { once: true, threshold: 0.7, } );
I don't want it to disappear when scrolling down and it exits the viewport. Only when I scroll up it will disappear and then when scroll down again I want the animation to start again. Kinda like the reveal animations in this example. Example Hope it is not confusing. I want the animation to start at one direction only, i.e when scrolling down.
Tried adding and removing once property. So far it seems not possible, or I don't know how to.