YgorLuiz

You forgot to add the scope selector, like this const container = useRef(); useGSAP(() => { // gsap code here... }, { scope: container }); // <-- scope is for selector text (optional)

@GreenSock Fixed with a custom hook to render only 1 time, useEffect() with zero dependencies will be executed twice https://react.dev/blog/2022/03/29/react-v18#new-strict-mode-behaviors

Not exactly but thanks for trying to help me, randomly sometimes it works but it's very rare

It's ok! Production - https://ultra-agency-q649bdcw9-ygorluiz.vercel.app Local - https://stackblitz.com/edit/github-6wno9z-29sc1b?file=src%2Fapp%2Fpage.tsx Here we have the preloader animation working normally in production , however we do not have the same result locally the animation does not start. tks

i have same issue "use client" import { useLayoutEffect, useRef, useState } from "react" import gsap from "gsap" import Hero from "@components/hero" import Loader from "@components/loader" import { useIsomorphicLayoutEffect } from "@hooks/useIsomorphicEffect" type Timeline = gsap.core.Timeline let callCount = 0 export default function Home() { const [loaderFinished, setLoaderFinished] = useState(false) const [tl, setTl] = useState<Timeline>() useIsomorphicLayoutEffect(() => { const ctx = gsap.context(() => { const tl = gsap.timeline({ onComplete: () => setLoaderFinished(true), }) setTl(tl) }) return () => ctx.revert() }, []) return <main>{loaderFinished ? <Hero /> : <Loader timeline={tl} />}</main> }