GSAP draggable trouble with gsap.set after a DOM manipulation

[Web Bae]

Hi everyone!

I'm trying to recreate this cool site card deck effect: https://www.cieffemilano.it/en/

I'm almost there! Works great when dragging down, but when dragging up, I keep getting an artifact card after the first drag event - cards[0].

cards[0] is supposed to be "staged" below the active card at y:100%. In my updateCards() function, everything should be properly set to what I need, and I console logged the heck out of this thing but can't figure out why the properties applied in gsap.set there aren't applying to cards[0]. My thought is it has something to do with my DOM manipulation before calling update cards (in onDragEnd) but it works fine for the drag down case, so I'm pretty stumped here.

Any thoughts? Thanks!

See the Pen WNBJRgZ by learyjk (@learyjk) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.