Jump to content


slider and click center image, multi gsap

Recommended Posts


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) *
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

Link to comment
Share on other sites

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!


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.