Draggable cards

[knalle]

I need a similar style of draggable as this old pen:

See the Pen 2b3fee8715f4d7c968f2395ff6d66159 by ryjohnson (@ryjohnson) on CodePen

.

 

But I would like to have it in GSAP 3 of course. I thought I knew what to change. But why isn't my pen working properly?

See the Pen MWVjPKJ by knalle (@knalle) on CodePen

[Cassie]

Heya! Iiinteresting. It is working but if you show the overflow on the container you'll see all the cards are stacked up on the left.



The timeline positioning them is at progress(0) and none of the cards have actually been moved to their start position. I've popped 

animation.progress(1).paused(true)

Into the initCells function and it's 'working' now. I'm not certain why this is happening though. Maybe someone else can shed some light on it.

See the Pen oNqzayV?editors=0111 by GreenSock (@GreenSock) on CodePen

 

[knalle]

Thanks, but if I drag to the left it stops working?

[GreenSock]

That's because you're trying to set progress to a NEGATIVE value (but a valid progress value is between 0 and 1). You can easily just use the gsap.utils.wrap() to correct that. 

 

And it wasn't rendering the cards in their initial positions because your timeline was paused, as Cassie pointed out. 

 

Better?: 

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