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

[Diego]

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

});

[Carl]

Hi and welcome to the GreenSock forums.

 

Your Bezier tween is changing the x and y values. The css top and left are not changing during your animation.

 

To be clear, when you set the x and y properties with GSAP you are creating a 2D transform which is similar to doing

 

transform: translateX() which technically we are converting to a 2d matrix (for performance reasons)

 

So if I tween an element to {x:200}, what that really means is that an inline style will be placed on the element that looks like:

<div id="logo" style="-webkit-transform: matrix(1, 0, 0, 1, 200, 0);">200</div>

We understand that not everyone can just look at a matrix and know what each value is for so we make it very easy to grab the values like x,y,rotation, scaleX etc by storing them in a .gsTransform object on the element that is being tweened.

 

Basically at any time I can get the x value of that element by using:

document.getElementById("logo")._gsTransform.x

Be sure to check out this CodePen demo that shows how to grab the x value after an animation: http://codepen.io/GreenSock/pen/ihsjA

 

If I have misunderstood your question and how it pertains to "top" and "left" let me know.

[Diego]

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?

[Carl]

Sorry there was a mistake in the code above (not in the codepen) that i just fixed

 

gsTransform should be _gsTransform.

 

 

 

To get the value of the DOM element on mouse down, you can do this:

 

 target.on("mousedown", function() {
    tween.kill();
    console.log("element x = " + this._gsTransform.x)
  });

 

http://codepen.io/GreenSock/pen/LoDCv

[jamiejefferson]

And just to clarify, _gsTransform is a property of the DOM node itself, not your jQuery/zepto collection.

 

$('.foo').get(0)._gsTransform.x
$('.foo')[0]._gsTransform.x

[Diego]

Thank you both, this was very useful!   

[KokoDoko]

Sorry there was a mistake in the code above (not in the codepen) that i just fixed

 

gsTransform should be _gsTransform.

 

 

 

To get the value of the DOM element on mouse down, you can do this:

 

 target.on("mousedown", function() {
    tween.kill();
    console.log("element x = " + this._gsTransform.x)
  });

 

See the Pen LoDCv by GreenSock (@GreenSock) on CodePen

 

Just wondering: why is this not in the documentation, and why is there no official "get()" method? It seems a bit hacky, and modern editors will show an error when you try to access _gsTransform on a htmlelement. 

 

Will better support for "get()" be added in the future?

[Carl]

It is possible that support for get() or similar will be added in the future. It was a private method as we weren't sure how useful it would be for others.

 

For future reference, it is best to ask questions once and not revive multiple threads from years ago. 

 

Thanks.

[KokoDoko]

Sorry about the multiple posts I was googling around and had 20 tabs open. It seems more people run into this niggle.