thvu

@OSUblake perhaps that's why I experienced some flickering if I add the opacity animation in @akapowl's pen. I fixed the pen, thank you for being so helpful!

Here's a working example of react-three-fiber and gsap ScrollTrigger. I basically took @akapowl's pen and rewrite it: https://codepen.io/thanghuuvu/pen/rNwLKOj Edit: I left out the opacity animation. Somehow adding it causes unwanted flickering.

Hi @akapowl, Thanks for pointing out my rookie mistake. I finally got it working by applying your suggestion. Interestingly, I don't need to use `ScrollTrigger.defaults()` with `immediateRender`. It just works. For anyone having the same issue, here's what it look like (Hopefully I can find sometime to add a working codepen later): import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); function AnimationWrapper() { const { scene, camera } = useThree(); const tl = gsap.timeline({ scrollTrigger: { trigger: ".section-two", endTrigger: ".section-five", scrub: true, }, }); useEffect(() => { scene.rotation.set(0, 3.1, 0); tl .to(scene.rotation, { y: 1.65 }) .to(scene.rotation, { y: 3.1 }); }, []); return null; }

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?