Jump to content
GreenSock

beamish

getting the rotation value of a draggable

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,

 

I can't seem to find a way to get the rotation value of a draggable tween which is placed on a timeline and then calling the seek() function to some mid-point on the timeline.  I've created a simple code pen as an example: 

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

 - as you can see, the "alert" at the end of the script returns a value of 0 despite the fact that the tween is rotated. 

 

Any suggestion? 

 

Thanks !

 

Elior

Link to comment
Share on other sites

Hi Elior,

 

Two things that you should correct.

 

First the type of Draggable instance. By default is set to "x,y", you should set your Draggable instance to be "rotation":

Draggable.create("#element",
{
  type:"rotation"
});

Second once the Timeline instance changes the properties of the Draggable target, you need to update the latter in order to reflect the changes made by any other instance. For that Draggable has a update() method. This code does the trick:

var tl = new TimelineLite({ paused: true });

Draggable.create("#element",
{
  type:"rotation"
});

var element = $("#element");
tl.add(TweenLite.set(element, { x: 100, y: 100 }), 0);
tl.add(TweenLite.set(element, { x: 200, y: 200, rotation:45 }), 5);
tl.seek(1.5);

var drag = Draggable.get(element);

//update the Draggable instance
drag.update();

alert(drag.rotation);

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hello  beamish..

 

You can try and access the _gsTransform object.. the below forked codepen alerts the number 45

 

See the Pen eIDGv by jonathan (@jonathan) on CodePen

var drag = Draggable.get(element);
alert(drag.target._gsTransform.rotation);

If you look in the browser inspector you will be able to see the object in the browser console.. instead of using alert() .. use console.log()

 

Does that help?

Link to comment
Share on other sites

Hi Rodrigo and Jonathan,

 

First I fixed the script which was not correct, but not relevant to my question (the tweens were not set up properly on the timeline).

 

Rodrigo, the point is that I need the object to be draggable and not rotatable... Jonathan - your suggestion works for me.

 

Thank you both :-)

 

Elior

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.
×