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...