[get the final position (left,top) after Bezier animation.]

Thank you both, this was very useful!   

[get the final position (left,top) after Bezier animation.]

Thanks a lot Carl !!!!, yes, I understand that Beizer animation change "x" and "y" matrix values, instead of  "top" and "left" values.., I was trying to drag with "top,left" but now I can start dragging "x,y" and my element stays in the same place where I intercept it..

See the Pen iAnpz by anon (@anon) on CodePen

One more question, you say that gsap grab the values in a

.gsTransform

 object on the element (very nice).., but I tried to get

.gsTransform.x

 value of my zepto element, but I couldn't, so, is there any way to get this value from my zepto/jQuery element?

[get the final position (left,top) after Bezier animation.]

Hi, im working in this Bezier animation: 

 

TweenMax.to(myFish, 5, {bezier:{curviness:2.1, values:[{x:0, y:-100},{x:150, y:-200},{x:0, y:-400},{x:-100, y:-500},{x:0, y:-700},{x:0, y:-900}],autoRotate:["x","y","rotation",90,false]}, ease:Power1.easeInOut});

 

What i want to do is the next:

 

I'm trying to simulate a fish swimming, everything is ok, but when the user do "touchstart" on the fish, this action will kill the tween but also I want to make this draggable, so I'm not sure if this could be, because I suppose I need the current position (top,left) to start the drag stuff. so.. any ideas? thanks a lot. 

 

I'm thinking.. 

 

$myContainer.append(target);

Draggable.create(target,{

   type:"top,left",

   bounds: $myContainer

});

var tween = TweenMax.to(target, 10, {bezier:{curviness:2.1, values:[{x:0, y:-100},{x:150, y:-200},{x:0, y:-400},{x:-100, y:-500},{x:0, y:-700},{x:0, y:-900}],autoRotate:["x","y","rotation",90,false]}, ease:Power1.easeInOut});

target.on("touchstart", function() {

            tween.kill();

           //then start dragging

});