[Animations with scrollTrigger not working after build, using create-react-app]

Okay so I just tried downgrading to 3.8.0 and now it works fine every time I try it. Wouldn't have thought of it, thanks!!

[Animations with scrollTrigger not working after build, using create-react-app]

See the Pen NWwdRJO by gonzzoli (@gonzzoli) on CodePen

Thats the general structure of all components using the animations, it still happens in the codepen here that it sometimes works and sometimes doesn't (and I need to refresh the page until it works). The weird thing is that either all animated components in my app work or none at all, even if they are independent from each other. I'll try downgrading and see if that solves it, thanks!

[Animations with scrollTrigger not working after build, using create-react-app]

10 hours ago, elegantseagulls said:

It seems to me like perhaps your content isn't loaded when your scrollTrigger is being setup, so it's firing at the wrong spot.

It does fire at the right spot, it's just that the animation ''breaks''.

Resizing the browser doesn't fix it, and I'm using useEffect to make sure the component is redered before setting the animations. And I have no lazy loaded images.

Not sure why I can't upload media here but this here is when it works fine, and this here is when it goes wrong.

[Animations with scrollTrigger not working after build, using create-react-app]

I created an app with some appear animations using scrollTrigger, they work fine when using a development server (npm start), but after creating the build it works like once every 20 refreshes, sometimes less sometimes more.

If I remove the scrollTrigger the animations do work.

I see in the devTools that animations occur when scrolling, but they are different from the ones happening when it works fine. It's as if the animations sometimes break.

here's one of the animations

useEffect(() => {
        gsap.from(containerRef.current, {scrollTrigger: {
            trigger: containerRef.current,
            start: 'top center+=220',
            toggleActions: 'play reverse play reverse'
        }, opacity: 0, y: -20, duration: 1})
    }, [])