draggable Draggable cloneZone and weird animation

[DYOU]

Hello, i'm starting with the Draggable https://greensock.com/docs/Utilities/Draggable  plugin and this is my achievement by now

See the Pen qpLoVb by HectorLeon (@HectorLeon) on CodePen

 

I am trying to replicate this Drag & Drop Library:  http://sunpietro.github.io/dragster/

 

-1) Pre-Drop-Hint -> Highlight the area where you gonna drop the element

-2) Smooth drop animation

-3) CloneBase ->  Only draggable option / Copy elements from here, no possible to drop options

-4) Move / Adapt column -> If we want to drop an element between 2, the column would be adapted

-5) Trash zone -> Only drop zone to remove elements

 

So i started by the point 1 & 2, and it gets weird how the element is dropped.

Also i realize that the elements are animated via translate3D, so in case i would want to get that elements dropped into my  slots, i guess i have to move into the slot after the transition.

 

as i said, the animation is weird, not smooth like this one, and the code is basically the same.

See the Pen RxqzjZ by HectorLeon (@HectorLeon) on CodePen

 

So i have a  clone-base at the top, and the elements would be draggables & copies from there, to put into my grid.

 

 

Can you help me first with the Weird animation & the cloneZone.

 

Or if there is a sample case ( i didn't find it i would love to use it as a guide )

thanks in advance.

See the Pen qpLoVb by HectorLeon (@HectorLeon) on CodePen