Gonzalop

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!!

https://codepen.io/gonzzoli/pen/NWwdRJO 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!

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.

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}) }, [])