[slider and click center image, multi gsap]

hello

Please understand that it is a little awkward because I use an English translator.

All I want is If you click an image on a slider like this, you have to make the image in the center of the screen.
I implemented that calculation value and applied gsap, but the slider became strange and started again from the beginning. I looked for a way.
When I did gsap.progress(), it didn't work...!
What do I have to do?

const gamesAniCarousel = (matches: boolean, count?: number) => {
const gamesCarouselsEl = document.querySelector(
"#games .carouselContainer"
) as HTMLDivElement;
return tl.to(carouselEls.current, {
xPercent: -85 * (carouselEls.current.length - 1),
scrollTrigger: {
trigger: "#games .wrapper",
start: "bottom center",
pin: true,
scrub: 1,
markers: true,
end: () => "+=" + gamesCarouselsEl?.offsetWidth,
},
});


const centerImage = (carousel: HTMLDivElement, idx: number) => {
const carouselWidth = carousel.offsetWidth;
const carouselLeft = carousel.offsetLeft;
const viewportWidth = window.innerWidth;
const xPosition =
((carouselLeft + carouselWidth / 2 - viewportWidth / 2) / viewportWidth) *
100;
const newProgress = idx / (carouselEls.current.length - 1);
// // tl.progress(1);

carouselEls.current.forEach((image, index) => {
const newX = -xPosition + (index - 1) * 2;
gsap.to(image, {
xPercent: newX,
});
});
};

This is Logic. The width of the container area is 300%.

See the Pen wvxXQrM by sijina (@sijina) on CodePen