Jump to content


Draggable Loop with Stagger

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.