Search the Community
Showing results for tags 'horizontalloop'.
Found 6 results
-
Hi, I am using Next.js with GSAP. I discovered that the horizontal length does not expand according to the width of the images when users redirect from other pages. Somehow, it works if the home page is refreshed. In the horizontal helper function, I noticed that items[length - 1].offsetLeft is not the total width that should be added up. Any help would be greatly appreciated! https://codesandbox.io/p/devbox/gsap-horizontal-infinite-carousel-lzn99z?file=%2Fapp%2Fcomponents%2FSlider.jsx%3A41%2C16
-
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
-
Hi, Experiencing some glitches with horizontalLoop helper. I have list items overlapping and popping in and out like image shown below. Just wondering if my implementation is off or if the helper is not quite the tool for this component. I attempted to use this at the most basic case, but still experiencing some issues. Thanks for any help.
-
Hi everyone, I'm trying to make a slider using this helper function (horizontalLoop). I've read the documentation and I don't understand how to change the scale of the current element (the one centred) in the loop, in a way that makes the current (centred) element bigger than the rest. I tried applying a custom class each time an element is "current" .current {scale: 1.2} The class applies correctly but the the inspector shows it is bypassed by element.style { translate: none; rotate: none; scale: none; transform: translate(0px, 0px); } I think these values are applied by the helper function. I'm kinda stuck, so any help would be much appreciated. Thank you, Giovanni -
Hi, based on the horizontalLoop function -> https://greensock.com/docs/v3/HelperFunctions#loop DEMO WITH DRAGGABLE (with "center: true" and onChange features), I want to have the first element starting on the center as well, basically the center element changes based on the viewport size, but my goal is to start the animation with it in the center. Here is an ideia of what i want to achieve -> public-image.co Thanks!
-
Hello Everyone ! After digging in the forum and documentation I'm wondering if it's possible to combine the helper function horizontalLoop() with ScrollTrigger for moving the elements like the demo of getScrollPosition() helper function : https://codepen.io/GreenSock/pen/xxPNyyO. Thank you in advance,
.thumb.png.c9d68a2daf023e7c3bd33ea53a8ed878.png)