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!

I was looking for marquee on scroll direction change example and thanks to this wonderful community I got it, I saw many threads for similar thing and one of them worked for me but I have little difference in my example, I have used helper function to make infinite and also for two opposite direction simultaneously. In my snippet the directions are working fine but it stops after sometimes and also at some points I found initially both were going in one direction. I request corrections from experts. Thanks a lot.

Hey, a quick one. When using the HorizontalLoop / SeamlessLoop (https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop) helper function, the reversed option doesnt change anything. My example code: // ... React useEffect code surrounding this. const logos = logoRefs.map((ref) => ref.current); const loop = horizontalLoop(logos, { reversed: true, // Doesnt work speed: 1, // Works paused: false, // Works repeat: -1, // Works }); const performanceTimeline = gsap.timeline({ scrollTrigger: { trigger: main.current, start: 'top bottom', end: 'bottom top', scrub: true, onEnter: () => loop.play(), onLeave: () => loop.pause(), onEnterBack: () => loop.play(), onLeaveBack: () => loop.pause(), }, }); Im expecting my marquee to animate to the right vs to the left which its currently doing. As im writing this it turns out the timeline causing the reverse to not work - specifically the onEnter etc.Why is this effecting the ability to reverse? Im pausing for performance reasons (offscreen = paused, onScreen = play) Kapture 2024-01-09 at 12.49.53.mp4