Infinite draggable scroll

[Sukru]

Hello, I've created something with infinite draggable scroll, but there's a gap forming after the last item, leaving some space between it and the first item. Also, there seems to be a slight jitter in the slider. I am sharing the error image in the attachment. Can you help me with this?

 

See the Pen KKJrgXd by sukruemanet (@sukruemanet) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting and custom logic stuff. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

Are you trying to make a seamless horizontal loop? If so, I'd recommend using the helper function here: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/

 

(The logic in the one you built there looks off to me.)

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

[Sukru]

@GSAP Helper Thank you very much, but would it be possible for you to help me with the codepen link? Because I removed this example from the examples. Other examples do not work as I wanted, such as pausing when the mouse hovers.

[GreenSock]

Where did you get that example? Can you please provide the link? Are you saying it's an official GreenSock demo? 

 

Again, this is all custom logic that you're asking us to craft for you. It's well beyond the scope of help we can typically provide in these free forums. I think you've got fundamental flaws in your logic there and how it's engineered which is why that helper function may be much more helpful to build around. 

 

It should be quite easy to pause/resume the helper function's timeline on hover/leave. Give it a shot and if you get stuck, feel free to post back here. 

 

Maybe this thread would be helpful too: 🤷‍♂️ 

 

[Sukru]

Yeah 

Yes, thank you very much, it's a good example, but it's a good example to repeat. I couldn't add draggable and it starts from the far right and goes to the left, what I mean is that it starts immediately.

 

See the Pen VwgVmYR by sukruemanet (@sukruemanet) on CodePen

[GreenSock]

For starting immediately, you can just get rid of the initial tween. I updated the helper function so that you can simply pass startEmpty: false if you'd like it to start from your initial positions: 

See the Pen GRzwmZR?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Hooking up Draggable is significantly more complex. Well, it's super easy to make something Draggable, but you're trying to set up something that'd automatically loop, synchronize perfectly with a timeline, and probably even allow inertia on release. It's all very doable, but beyond the scope of help we can provide free here. Feel free to contact us if you'd like to explore paid consulting options. Or you can just use that helper function I originally referred you to that has Draggable built in already. 

 

In fact, as a courtesy I went ahead and wired that up for you here: 

See the Pen WNPYjOp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

See how much simpler and more powerful that is? Note that it uses InertiaPlugin which is a membership benefit of Club GSAP. https://gsap.com/pricing 

 

I hope that helps. 

[Sukru]

@GreenSock Thank you very much, This option was better for my project. The only thing missing was draggable. I tried a few times but it didn't work. Finally, can you help with this?

 

See the Pen mdvQXqJ by sukruemanet (@sukruemanet) on CodePen

[GreenSock]

I don't understand - why are you so resistant to using the helper function that already has Draggable built in? It's way beyond the scope of help we can provide here in these free forums to do all the work necessary to integrate perfect draggable functionality in that other one. I already spent a bunch of time as a courtesy for you wiring up your demo with that recommended helper function that has draggable functionality. I'm baffled as to why you don't want to use that. Can you explain? 

 

As I see it, your options are: 

1. Use the one I already provided that offers all the features (draggable, inertia, gradually pausing/resuming on hover, infinite repeating, snapping, etc.) 
2. Use the one you're already attempting, but wire up the Draggable functionality yourself. You are welcome to look at the demo I provided and try to borrow the Draggable logic for that, but I don't think that'll be simple for you. 
3. Hire someone to help you. We do offer paid consulting services but there's a 4-hour minimum so you'd have to judge if the expense is worth it. 

[Sukru]

@GreenSock hi, I didn't do the Draggble process, I just have this problem left. I can't switch by moving right and left.

[GreenSock]

9 minutes ago, Sukru said:

I can't switch by moving right and left.

I don't understand what you mean. Please explain. 

 

I provided a solution. I spent a bunch of time on that for you as a courtesy. As far as I can tell, it does everything you need (and more). What am I missing? What doesn't my solution deliver that you still need? Why are you resistant to using the solution provided? 

[Sukru]

@GreenSock 

 

I want to swipe with Gsap draggable as in the example below.

 

See the Pen WNPYjOp by GreenSock (@GreenSock) on CodePen

[GreenSock]

I'm still completely lost. I can swipe/drag that demo. What am I missing? PLEASE be very, very specific about what exactly the problem is. 

[Sukru]

@GreenSock  

 

I'm talking about this example. I can't add this to draggable.

 

See the Pen mdvQXqJ by sukruemanet (@sukruemanet) on CodePen

[GreenSock]

I find myself wondering if you read my replies. 🤷‍♂️

 

I know you were asking about adding Draggable to that demo - I already answered that. It is beyond the scope of help we can provide in these free forums. It's no small task to wire up all the logic in a context like this. So the answer is "no". (well, unless someone else in these forums wants to volunteer to do that for you for free). 

 

But we ALREADY have a helper function that does everything you're asking for. I took the time to hook it all up for you as a courtesy and then you keep coming back asking to apply Draggable to a completely different codebase. But I've already given you a solution that delivers the functionality you requested (and much more), right? You seem resistant to that which is really confusing me. Can you please explain why you don't want to use the solution I provided? What exactly isn't working the way you need? 

 

It's fine if you don't want to use my solution, but your other options are to either hire someone to build it for you or build it yourself (and you're welcome to look at the logic from the helper function I linked to - that might be helpful). 

[Sukru]

@GreenSock I know you helped me, thank you very much. Yes, there is a structure among the options that works with the function I want, but when I added it to the project, it did not work stably and some problems arose. And then I tried the text version without any problems and it worked very well. Actually, the reason I insisted was to add draggble for this example. I wasn't aware there was a fee for this so I apologize. Should I get a "GSAP Premium" membership for this? Or should I open a job on a freelance forum?

[Rodrigo]

Hi,

 

As Jack explained you can contact us directly for paid consulting, post in the Jobs & Freelance forums or create the logic yourself using the Helper Function's code as a base for it.

8 hours ago, Sukru said:

Should I get a "GSAP Premium" membership for this?

The GSAP Club membership gives you access to the bonus plugins (depending on the tier you join) but there is no especial forums/support treatment because you are a Club member. We offer support to every user in these free forums regardless of their membership status and we try to do as much as we can, but the main constraint is time. As you can see these are very active forums and we aim to answer questions and issues in less than 24 hours for every user, spending a bunch of hours in a single thread would mean that other users will have to wait longer to get an answer for their questions. Sometimes we just don't have the time resources to do that.

 

Happy Tweening!

[GreenSock]

12 hours ago, Sukru said:

when I added it to the project, it did not work stably and some problems arose.

That sounds strange to me. My guess is that it's just a CSS/setup issue.  If you need help, please make sure you provide a minimal demo that clearly illustrates the issue. I bet you could pretty easily get the Draggable helper function to work properly in your project. It'll likely be more effort to adjust that one you keep asking to inject Draggable into.