Jump to content
Search Community

Dragging and Edge Animate

SteveZ test
Moderator Tag

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



I'm making the transition from Flash to Edge animate. I have a simple object (the letter 'A' named AA2) that sits on the stage. I have it animate by moving from one side of the stage to the other. After the animation is complete, I then want to be able to drag the letter anywhere on the stage. The dragging works fine with jQuery draggable, however I cannot seem to apply the same functionality using GreenSock's Draggable function. I would really like to use GSAP but I'm having trouble. I attached a zip of the Adobe Edge Animate file in question. If you don't have Animate, I included the code that is attached to the creationComplete of my Stage. Any help would be greatly appreciated!



yepnope({nope:['js/jquery-ui-1.10.0.custom.min.js', 'js/Draggable.min.js', 'js/TweenMax.min.js'], complete: init});


function init(){




          //Want to do the same except use GreenSock's Draggable instead of jQuery but not working






Link to comment
Share on other sites

I have another question regarding the same Edge animation, how can I constrain the dragging of the letter 'A' within a rectangle (aptly named "Rectangle")? The following code doesn't seem to work:


Draggable.create(sym.$('AA2'), {bounds: sym.$('Rectangle')} );

Link to comment
Share on other sites

  • 1 month later...

If I were you I would create variables for each edge animate element you want use in your code. It is much easier to read the code and works for me. For your case I would create two variables for each of your elements- then declare those variables in the draggable code (notice you don't need commas or paranthesis around them now either- and you can name them whatever you want!). much cleaner!


var letterA = sym.$('AA2');

var rectangle= sym.$('Rectangle');


Draggable.create(letterA, {bounds: rectangle) });

  • Like 2
Link to comment
Share on other sites

  • 8 months later...

Hello from Spain,
I was delighted to discover GSAP and am looking for ways to integrate it into a project, I need to rotate an element in Edge and basing on the demo I built a small prototype, but not responding as I expect. I need that this limited degree rotation min to a maximum degree, for this I used bounds: {minRotation: -135, maxRotation: 135}, but the rotation is not stopped. Also I need to know what the current degree of rotation while the element is rotated. 
I'll be grateful if you can help me.




      ],complete: init});

function init()

{var knob =sym.$('control');




   bounds:{minRotation:-135, maxRotation:135},

   onDrag:function() {

   sym.$("Text").html("Current rotation in degrees = "+rotation());




Link to comment
Share on other sites

Hi, I also use Edge Animate combine to GSAP. That's wonderful. But, I don't understand why, when elements are placed inside a symbol, Draggable seems to loose object position when I release it and try to move it one more time. Is there a solution to keep release position for each new drag and drop ? Which kind of position do you advice for each object ?


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.
  • Create New...