Issues with SeamlessLoop Carousel - Resizing and Dragging Snap

[Usaid]

Hi GSAP community,

 

I’m a beginner with GSAP, and I’ve used the seamlessLoop helper function (with some modifications) to create a carousel that slides automatically every few seconds. I also added custom snapping functionality for Draggable since it wasn’t included in the original helper.

 

The carousel works fine initially, but I’m facing two major issues:

1. Resizing Issue:
   On the initial window load, the slides are perfectly aligned and animate correctly. However, when I resize the window, the slides go off their positions, and the animation becomes misaligned. This issue is especially noticeable if I resize mid-animation.

   Important Note: When I don’t use the seamlessLoop function, the slides are perfectly aligned even after resizing, which suggests there’s no issue with my CSS.

2. Dragging Snap Issue:
   On the first slide, when I drag to the right to go to the previous slide (which is the last slide due to the seamless looping), the carousel slides all the way to the first slide and then snaps. For other slides, the dragging snap works perfectly.

Things I’ve Tried So Far:

• Verified that the issue isn’t caused by CSS by testing without the seamlessLoop function.
• Checked the distanceToStart and distanceToLoop calculations in the populateTimeline function. They appear to be miscalculated during resizing.
• Added logging to debug these values and noticed inconsistencies when resizing.
• Ensured proper cleanup of event listeners like resize and visibilitychange.
• Experimented with adjusting margins, including the spaceBefore and xPercents arrays, but couldn’t resolve the issue.

Here’s the CodePen with my implementation: 

 

Since I’m just a beginner, I’d really appreciate any help or advice on how to resolve these problems. Thank you for your patience and support!

See the Pen bNbLBBw by Mohd-Usaid (@Mohd-Usaid) on CodePen.

[Rodrigo]

Hi,

 

The helper functions are created with the most common scenarios in mind while yours could be a tad more specific. We'll have a look at this demo when we can but I can't give you a specific time though, since this falls more into the consulting services category rather than general support.

[Usaid]

Thank you for the clarification. I understand that this falls under consulting services, and I appreciate your team's willingness to look into the demo when time allows. I’ll keep that in mind and can provide any additional details or context if needed. It’s kind of blocking me from moving forward, so any help or insight would be awesome.