andiwi

Ah! @Cassie, you are my hero! ?? Also many thanks to @OSUblake for helping here. Where can I buy you a cup of coffee? ☕️

I set the trigger to a wrapper div. Unfortunately, this didn't solve the issue. Is setting the trigger to the to-be-animated element bad in general when using ScrollTrigger with a gsap.from? I just followed the simple example of https://greensock.com/docs/v3/Plugins/ScrollTrigger What is interesting: when I wrap the gsap animation into a timeout to push it to the JS event loop, the animation at least gets played most of the time, but still not every-time (refresh browser multiple times until the animation gets stuck again). So there might be some race condition between DOM painting of react/nextjs static rendering optimization and gsap initialisation. Example with scroll trigger on a wrapper div: https://codesandbox.io/s/nextjs-gsap-scrolltrigger-bug-v3-uselayouteffect-another-trigger-ys92e?file=/pages/index.js Without timeout: https://csb-ys92e-nol25vd68-andiwi.vercel.app/ With timeout: https://csb-ys92e-nol25vd68-andiwi.vercel.app/with_timeout EDIT: I once again tested the code with simple react -> also not working: https://codesandbox.io/s/react-gsap-scrolltrigger-not-working-gy3kn

I just tested a gsap.from and a gsap.to with and without opacity animation (without scrollTrigger). For example: useLayoutEffect(() => { gsap.from(h1Ref.current, { rotation: 45, y: 200, duration: 1, opacity: 0, // also tested without this line }); }, []); All examples are working fine in production build. Maybe an issue in the scrollTrigger plugin? EDIT: I also tested the same effect with my scrollTrigger which works fine with a gsap.to but when using the gsap.from in combination with scrollTrigger the animation doesn't get played correctly. So it might be a bug of scrollTrigger in combination with a gsap.from ? useLayoutEffect(() => { gsap.to(h1Ref.current, { // gsap.to is working fine, gsap.from -> not working scrollTrigger: { id: 1, trigger: h1Ref.current, start: "top bottom", toggleActions: "play none none reverse", }, rotation: 45, y: 200, duration: 1, opacity: 0, // also tested without this line }); }, []);

Thank you for the hints. I removed the paused:true and the animation cleanup (although on this page a cleanup is recommended: https://greensock.com/react/#cleaning-up ) Yes, it works on codesandbox (which is the development setup), but when I build and deploy the production build the headline is not displayed. https://codesandbox.io/s/nextjs-gsap-scrolltrigger-bug-uselayouteffect-v2-qf0w1?file=/pages/index.js (working dev) https://csb-qf0w1-p1ozjx5rl-andiwi.vercel.app/ (not working production build)

Thank you for your quick response. I tried to use useLayoutEffect. However, when using the useLayoutEffect hook, the ScrollTrigger effect does not work at all. Here is the example: https://codesandbox.io/s/nextjs-gsap-scrolltrigger-bug-uselayouteffect-vxxd9?file=/pages/index.js Deployed: https://csb-vxxd9-andiwi.vercel.app/ EDIT: Indeed, what I can observe is that the console.log output is sometimes different, but the bug occurs in both cases. It looks like the DOM is not ready when gsap effect is initialised. console.log output (example 1): console.log output (example 2):

Hi @all, thank you for this awesome library! Unfortunately, I am facing issues with the ScrollTrigger effect inside my nextjs production build. I hope you can help me. The ScrollTrigger effect works perfectly fine, when I start the nextjs project in development ("next dev"). However, when I build a production build and host the production build via a web server, the element to which the ScrollTrigger effect is attached to is not displayed from time to time. I created a simple codesandbox where you can reproduce the behaviour: https://codesandbox.io/s/nextjs-gsap-scrolltrigger-bug-qtgfl?file=/pages/index.js It works fine inside the codesandbox (development) but when built and deployed to a server https://csb-qtgfl-nml1dj1ep-andiwi.vercel.app/ the headline is not displayed from time to time. To reproduce go to https://csb-qtgfl-nml1dj1ep-andiwi.vercel.app/ and refresh the page multiple times until the headline is not displayed anymore. I followed the official resources https://greensock.com/react/ and https://greensock.com/st-mistakes/ and also read through forum posts like https://greensock.com/forums/topic/27012-scrolltrigger-and-array-of-refs-in-react/ but did not find a solution for the problem. I am new to gsap. Do you spot any wrong usage of the library? The same setup works in a simple react app (e.g. create-react-app). Would be great if you have any ideas how to solve this error. I am trying to solve the error for days now without any success and I am out of ideas. Thank you!