When scrolling down elements freezing, and when want to go up they doesn't return back
https://codesandbox.io/s/sleepy-glitter-ixbmnk?file=/package.json:0-775
gsap.registerPlugin(ScrollTrigger)
const mirrors = useRef()
useEffect(() => {
const tl = gsap.timeline({
scrollTrigger: {
trigger: "body",
start: "top top",
end: "bottom bottom",
markers: true,
scrub: 1,
}
})
tl.to(mirrors.current.position, {
z: "+= 10",
})
})
return (
<group name="mirrors" {...props} ref={mirrors}>
<meshLambertMaterial ref={sideMaterial} map={thinFilmFresnelMap} color="#AAAAAA" />
<meshLambertMaterial ref={reflectionMaterial} map={thinFilmFresnelMap} envMap={envMap} color="#FFFFFF" />
{mirrorsData.mirrors.map((mirror, index) => (
<Mirror
key={`mirror-${index}`}
layers={layers}
{...mirror}
name={`mirror-${index}`}
sideMaterial={sideMaterial.current}
reflectionMaterial={reflectionMaterial.current}
/>
))}
</group>
)
}
