Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Diego

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

Recommended Posts

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
});
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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
  • Like 3
Link to comment
Share on other sites

Thank you both, this was very useful!    8-)

Link to comment
Share on other sites

  • 1 year later...

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?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×