Search the Community

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: 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. 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: https://codepen.io/Mohd-Usaid/pen/bNbLBBw 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!