Im using R3F + GSAP for animating box position. Using Raycaster I set a white box object to indicate when a menu item (box) collides with it so the animation would start.
I would like to achieve the position x to reset once the object is outside the intersection object.
Currently each menu item get positioned x = 1 when intersecting, suppose to, but occurring with a bug (see sandbox demo).
Bonus point would be to set opacity 0.5 to all menu items which are not intersecting.
https://codesandbox.io/p/sandbox/r3f-scrolling-animation-rcj9pc
Three.js Rocks! Appreciate the help :-)