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;
```
