slider and click center image, multi gsap

[sijin]

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

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting or logic troubleshooting. One problem for sure in your demo is that you're using NESTED ScrollTriggers which is a common mistake. It is logically impossible for a timeline's playhead to be controlled by both a parent timeline and the scrollbar position. See 

 

 

Furthermore, if I understand your question correctly, you'd need to cook up some custom logic to calculate exactly when each element is centered in the viewport horizontally. I'm sure it's possible, but it's beyond the scope of help we can provide for free here. You're welcome to post in the "Jobs & Freelance" forum to see if you can hire someone or contact us directly to explore paid consulting services. 

 

 

Good luck with your project!