[Animation not working in production but works in development - NextJS]

I have a carousel which is similar to https://www.satoshirunners.io/ under the "Satoshi Runners" section where if you scroll up and down, you can see the images are moving left and right. I managed to duplicate the functionality in my apps but when I deploy it on production, only the first row (#Track1) of the images are able to move but not for the second row (#Track2). 

 

```
 

/* eslint-disable @next/next/no-img-element */

import styles from '../styles/Gallery.module.scss';

import gsap from 'gsap';

import { MutableRefObject, useEffect, useRef } from 'react';

import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

 

const Gallery = () => {

const el = useRef() as MutableRefObject<HTMLDivElement>;

const q = gsap.utils.selector(el);

 

useEffect(() => {

gsap.registerPlugin(ScrollTrigger);

gsap.to(q('#Track1'), {

scrollTrigger: {

trigger: '#CarouselContainer',

scrub: 1,

},

x: -800,

});

gsap.from(q('#Track2'), {

scrollTrigger: {

trigger: '#CarouselContainer',

scrub: 1,

},

x: -800,

});

}, []);

 

return (

<div id='CarouselContainer' className={styles.container} ref={el}>

    <div className={styles.main}>

        <div className={styles.slider}>

           <div className={styles.slide_track} id='Track1'>

               <img src={Image1.src} className={styles.slide} alt='image1' />

               <img src={Image2.src} className={styles.slide} alt='image2' />

               <img src={Image3.src} className={styles.slide} alt='image3' />

               <img src={Image4.src} className={styles.slide} alt='image4' />

               <img src={Image5.src} className={styles.slide} alt='image5' />

               <img src={Image6.src} className={styles.slide} alt='image6' />

               <img src={Image7.src} className={styles.slide} alt='image7' />

               <img src={Image8.src} className={styles.slide} alt='image8' />

           </div>

       </div>

    </div>

    <div className={styles.main}>

        <div className={styles.slider2}>

            <div className={styles.slide_track} id='Track2'>

               <img src={Image1.src} className={styles.slide} alt='image1' />

               <img src={Image2.src} className={styles.slide} alt='image2' />

               <img src={Image3.src} className={styles.slide} alt='image3' />

               <img src={Image4.src} className={styles.slide} alt='image4' />

               <img src={Image5.src} className={styles.slide} alt='image5' />

               <img src={Image6.src} className={styles.slide} alt='image6' />

               <img src={Image7.src} className={styles.slide} alt='image7' />

               <img src={Image8.src} className={styles.slide} alt='image8' />

           </div>

       </div>

    </div>

</div>

);

};

 

export default Gallery;

```