Draggable Content

[Sukru]

Hello, I made draggable content, but there is a problem in my code to move it by dragging left and right, but I could not solve it. Can you help with the Codepen link?

 

//Draggable Start
let tickerElement = document.querySelector(".ticker");

Draggable.create(tickerElement, {
  type: "x",
  edgeResistance: 1,
  bounds: ".ticker-slider",
  onDrag: updateTickerPosition
});

function updateTickerPosition() {
  let newPosition = tickerElement.getBoundingClientRect().left;
  gsap.set(".ticker-content", { x: newPosition });
}
//Draggable End

 

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

[ryan_labar]

I'm thinking that because you're using draggable to modify an animation, you'll want to setup a proxy element to use as your draggable item to update the slider's position. Similar to what's happening here:

See the Pen GRxNJGK?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen

and

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

and

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

[GreenSock]

This is a duplicate post: 

@Sukru please don't double-post. We already gave you an answer in the other thread. 

[Sukru]

@ryan_labar Thank you,  Of course, I can help with that! You're experiencing a couple of remaining issues with the visual height, where the dragging gets clipped from the right and left edges, and the loop behavior is disrupted.

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

[GreenSock]

Just to be clear, this solution was already provided in the other thread: 

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

 

But @Sukru doesn't seem to want to use that and hasn't provided a minimal demo that shows why (claims there are issues). As far as I can tell, it delivers all the requested functionality. He has been informed that it's not a trivial task to wire up all the seamless looping with Draggable functionality in the ticker helper function he's using, and it's well beyond the scope of help we can provide for free in these forums.

 

@Sukru I'm still unsure why you're so reluctant to use the solution provided or what problems you think there are with it, but you are welcome to post a minimal demo that clearly shows why and we'd be happy to take a look. Just make sure you set up your HTML/CSS such that there aren't any transforms necessary in the native state. It's typically much easier to do that anyway rather than relying on transforms to lay everything out. 

 

Good luck!

[Sukru]

Hello again, @GreenSock  I know I've made this topic too long, I took your suggestions into consideration and edited my code, I'm just moving the wrong part. .ticker moves instead of .ticker-content how can I solve this? Can you help with the example below?

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

[GreenSock]

Sorry, @Sukru, I've been very clear over and over and over again - what you're asking us to do for you is way beyond the scope of help we can provide for free in these forums. It is not as simple as just switching a target on your Draggable. 

 

As stated in the other (duplicate) thread, your options are: 

1. Use the solution I already provided that offers all the features (draggable, inertia, gradually pausing/resuming on hover, infinite repeating, snapping, etc.) 
2. Use the "ticker" 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. 

Good luck!