RemiB

After a in deep analyse I realised it wasn't ScrollTrigger's fault . Is something else you're right. Because if i change the component and come back to the one with animation is working as it should. I created a simulation of what the result should be on sandbox -> https://codesandbox.io/s/scrolltrigger-jcml5?fontsize=14&hidenavigation=1&theme=dark I think is somehow the useEffect and the way is prioritising the executions of the passed functions. Thank you.

Hello everyone, I would like to start by mentioning that I am a beginner with GSAP as well as with React.js And my problem is the fallowing : I am using ScrollTrigger with a create-react-app the problem is that works very well on local env but once the app is deployed the ScrollTrigger doesn't get triggered anymore. But my function does, being checked by a console.log. I should mention that this function seats into an external file which is imported inside of the rendered component and executed by a useEffect hook once the component is mounted. I got no errors inside deploying console, everything looks well. Thanks in advance. The react component! import { landing2Animation, animateArrow, } from "../../components/animationScripts"; function LandingPage2(props) { const [width] = useWindowSize(); useEffect(() => { animateArrow(); landing2Animation(); }, []); return (...) External File! The function contains gsap.from methods! import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const widthIn = window.innerWidth; /// Landing 2 animation ////////////// export const landing2Animation = () => { gsap.from(".visible", { scrollTrigger: { trigger: ".visible", start: "center bottom", end: "center bottom", toggleActions: "restart none reverse none", }, x: -200, opacity: 0, duration: 1, }); gsap.from(".easyer", { scrollTrigger: { trigger: ".easyer", start: "center bottom", end: "center bottom", toggleActions: "play none reverse none", }, x: -100, opacity: 0, duration: 1, }); gsap.from(".simple", { scrollTrigger: { trigger: ".easyer", start: "center bottom", end: "center bottom", toggleActions: "play none reverse none", }, x: 100, opacity: 0, duration: 1, }); gsap.from(".noLimit", { scrollTrigger: { trigger: ".easyer", start: "center bottom", end: "center bottom", toggleActions: "play none reverse none", }, x: 200, opacity: 0, duration: 1, }); };