As shown in the codepen, the issue I'm having is that whenever I finish dragging the object, the Bezier tween of that object stops, as both the Draggable and beziertween use Translate3D. While experimenting, I found that only x,y properties on both provide smooth animation and are not breaking the position of elements. Using margins or top/left positions renders bezier animation to be choppy, while using those types for Draggable causes the elements to be thrown off their initial positions. You can see the full-scale animation I'm working on at http://patmir.com.
Using onDragEnd to re-initialize the bezier tweens returns the objects to their initial positions, which I want to avoid.
The question is:
What would be an appropriate solution here?
I'd rather avoid having to re-initialize tweens and modyfing the tweens to use current position of elements, as it might decrease the site's performance significantly.
Using different types for Daggable won't work, as the elements are positioned on top/left based on % and calc().
I would appreciate any insight into what I'm doing wrong here,
With Best Regards,