ScrollTrigger on CRA deployed with Netlify

[RemiB]

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,

  });

};

 

 

 

[GreenSock]

It sure sounds like an issue with your build system/bundling. Unfortunately, there's really not much we can do to help if you just post snippets of the code that works locally. If you want help, you'd need to post a minimal demo that clearly shows the problem in a reproducible way. Perhaps try to simplify things into a stackblitz.com or codesandbox.io demo? Or something we can NPM install? But again, we really try to keep these forums focused on GSAP-specific questions and this sounds more like an issue with your build system so I'm not sure how much we can help. We'll do our best though once you provide something we can look at. 

[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.