Search the Community
Showing results for tags 'horizontalloop'.
Found 8 results
-
Hi everyone, I’m working on a simple infinite text loop animation for an assignment due tomorrow. My goal is for it to scroll continuously without any empty spaces between loops. I’ve tried creating it with this but currently, each item is set to flex: 0 0 33%. While it works, I’d like to reduce the space between items, but when I adjust the flex value, it breaks the animation. Can anyone tell me what I am doing wrong and help me tweak this to get a seamless scroll without gaps? Thanks in advance!
-
as you can see on CodePen, my scrolling is not smooth (at least the horizontal animation), I've tried to add ease for horizontalLoop function but it didn't work, what should I do? I don't have much experience with ScrollTrigger, that's my first time using it. what I want to achieve with this section is a smooth horizontal scrolling, like, take more time after scrolling in a more natural way than now. One other thing, if you notice, the cloned items (I clone the images inside the row to make the seamless loop with js) don't have space between the first and last item of the row, I also don't know why, I've tried adding some margin left to the last item but that didn't work because of gsap transforms (to make animation alive).
-
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.
-
Change the scale of current element in Horizontal Loop (helper function)
giovannimalausa posted a topic in GSAP
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)