Draggable Loop with Stagger

[garyyau]

 

Hello everyone!

 

I've researching the forums for a while now but first time posting. I'm trying to create a carousel that infinitely loops (following  the example from @OSUblake from another post), but I also want to add a stagger on the elements, so that if the user drags left, the left elements will start moving before the right ones, and vice versa.

 

What I've kind of got is that I probably need to define a new tween each time because the element orders are different, so right now I've got this onDragStart...
 

_handleDragStart = () => {
	const nodes = Array.prototype.slice.call(
		document.getElementsByClassName(`${ styles.node }`)
	).sort((nodeA, nodeB) => {
		const posA = nodeA.getBoundingClientRect().x;
		const posB = nodeB.getBoundingClientRect().x;

		if (posA < posB) return -1;
		if (posA > posB) return 1;
		return 0;
	});

	TweenMax.staggerTo(nodes, 1.5 * 6, {
		x: `+=${ this.state.containerWidth * 2 }`,
		ease: Power2.easeInOut,
		modifiers: { x: x => {
			return x % this.state.containerWidth;
		} },
	}, 0.02);
};

 

But I'm not sure how to incorporate the drag distance into this calculation so that it'll only drag as far as the user drags...

 

 

See the Pen c8723bcdba9df92bc11fcfe062e01de8 by osublake (@osublake) on CodePen

 

See the Pen c8723bcdba9df92bc11fcfe062e01de8 by osublake (@osublake) on CodePen