I have a problem with three js and gsap animation, its logic is that as I scroll, the faces of the cube are attached to the cube itself. when you attach a face to the cube, the face becomes for a while with 100% transparency. The problem is that let's say in production when I update the page in the section below the section with the animation I described above, all of the faces of my cube become opaque as if they are simultaneously joined to the cube, what can this be about and how can it be fixed? now will send my code in the next message
animation:
useIsomorphicLayoutEffect(() => {
if (!width) return;
if (width >= 1200) {
const changeOpacity = (props: ChangeOpacity) => {
const {
variant = "increase",
selector,
start = "+=75",
end = `+=${window.innerHeight}`,
} = props;
if (variant === "increase") {
return gsap.to(
{},
{
scrollTrigger: {
trigger: contextRef.current,
scrub: 0.1,
start,
end,
onUpdate: (self) => {
const progress = self.progress;
gsap.to(selector, {
opacity: progress * 2,
duration: 0,
});
},
},
}
);
}
return gsap.to(
{},
{
scrollTrigger: {
trigger: contextRef.current,
scrub: 0.1,
start,
end,
onUpdate: () => {
gsap.to(selector, {
opacity: 0,
duration: 0,
});
},
},
}
);
};
const ctx = gsap.context(() => {
changeOpacity({
selector: ".first-panel",
start: `+=75`,
});
changeOpacity({
variant: "decrease",
selector: ".first-panel",
start: `+=${75 + window.innerHeight + 75}`,
});
changeOpacity({
selector: ".second-panel",
start: `+=${window.innerHeight}`,
});
changeOpacity({
variant: "decrease",
selector: ".second-panel",
start: `+=${window.innerHeight * 2}`,
});
changeOpacity({
selector: ".third-panel",
start: `+=${window.innerHeight * 2 + 75}`,
});
changeOpacity({
variant: "decrease",
selector: ".third-panel",
start: `+=${window.innerHeight * 3}`,
});
changeOpacity({
selector: ".fourth-panel",
start: `+=${window.innerHeight * 3 + 75}`,
});
changeOpacity({
variant: "decrease",
selector: ".fourth-panel",
start: `+=${window.innerHeight * 4}`,
});
changeOpacity({
selector: ".fifth-panel",
start: `+=${window.innerHeight * 4 + 75}`,
});
changeOpacity({
variant: "decrease",
selector: ".fifth-panel",
start: `+=${window.innerHeight * 5}`,
});
changeOpacity({
selector: ".sixth-panel",
start: `+=${window.innerHeight * 5 + 75}`,
});
}, contextRef);
return () => ctx.revert();
}
}, [width, contextRef]);
codesandbox: https://codesandbox.io/p/sandbox/sharp-fast-j625lw
problem:
must be like this :