helloPlease understand that it is a little awkward because I use an English translator.All I want is https://codepen.io/sijina/pen/wvxXQrM 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%.
