Hello experts, I am also experiencing this issue in my Typescript setup with react-three-fiber and gsap ScrollTrigger. I can't seem to apply the fix in my code:
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
// this doesn't work
ScrollTrigger.defaults({
immediateRender: false,
ease: "power1.inOut",
scrub: true,
} as any);
function AnimationWrapper() {
const { scene, camera } = useThree();
const tl = gsap.timeline();
useEffect(() => {
scene.rotation.set(0, 3.1, 0);
tl
.to(scene.rotation, {
y: 1.65,
scrollTrigger: {
trigger: ".section-two",
// this won't work either
immediateRender: false,
scrub: true,
end: "top top",
} as any,
})
.to(scene.rotation, {
y: 3.1,
scrollTrigger: {
trigger: ".section-three",
// this won't work either
immediateRender: false,
scrub: true,
end: "top top",
} as any,
});
}, []);
return null;
}
Is this solution still viable?