ScrollTrigger is failing with vite

[wolfyglobal]

hello since i looked at the project a vite the program shows me failures in the animations. At the moment of loading the page for the first time, it does not show the animation, then it is the sample when it resizes the screens and the makers are always shown on top este es la captura del proyecto

 

 useEffect(() => {

    

    ScrollTrigger.matchMedia({
      'all':function(){
        const bgTl = gsap.timeline({
          scrollTrigger: {
            // trigger:q('.esenario'),
            trigger: heroRef.current,
            // trigger:heroRefDom,
            start: 'top top',
            // end:''
            end: '100% top',
            scrub: 1,
            markers: true,
          },
        })

        
    q('.img-bg').forEach(bg=>{
      const depth = bg.dataset.depth;
      const movement = window.innerHeight * depth;

      bgTl.to(bg,{
        y:movement
      },'-=1')
    })


    bgTl.to(q('.center-area'),{
      y:window.innerHeight*0.5
    },'-=1');
      }
    })
 },[])

 

 

I am using vite as a packager not npx-create-react-app

[OSUblake]

Hi wolfyglobal,

 

It's impossible to tell what the problem is from the information you have provided. Can you make a minimal demo on CodeSandbox? Here's a Vite demo I found that you can fork.

 

https://codesandbox.io/s/vite-react-forked-kqk1z?file=/src/App.jsx