Jump to content
Search Community

Draggable Parent/Child question from a newbie

edpilot 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 an admitted newbie Greensock user/member. I use Edge Animate and have incorporated Draggable into a very simple interactive component. I typically learn with simply trying different things and looking at what others have done. It's steep learning curve thing to do, but I just keep plugging away at it.


I'm trying to solve a parent/child issue. I have a larger circle that has a smaller "wedge" layered on top. I can rotate both symbols independently but ultimately I want the lower layer (the larger circle) to rotate the child wedge. The wedge should be able to be moved independently of the larger circle.


I'm looking at all kinds of ways to solve this, but thought I'd try asking for help too. The very simple js code is pasted below...it works just fine rotating my "dial" (the large circle) with my "index" (the wedge).


Any suggestions would be appreciated as I tinker with the code. I'll upload something to Codepen as soon as I get that figured out too!


Thank you for any help or suggestions!



* Adobe Edge Animate Composition Actions
* Edit this file with caution, being careful to preserve 
* function signatures and comments starting with 'Edge' to maintain the 
* ability to interact with these actions from within Adobe Edge Animate
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

   //Edge symbol: 'stage'
   (function(symbolName) {

      Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {
         Draggable.create("#Stage_dial",{type: "rotation"});
         Draggable.create("#Stage_index",{type: "rotation"});

      //Edge binding end

   //Edge symbol end:'stage'

   //Edge symbol: 'dial'
   (function(symbolName) {   
   //Edge symbol end:'dial'

   //Edge symbol: 'index'
   (function(symbolName) {   
   //Edge symbol end:'index'

})(window.jQuery || AdobeEdge.$, AdobeEdge, "EDGE-3280152");
Link to comment
Share on other sites

I'll add that I have played around with a Codepen post "Nested Draggable" and was able to get the effect I am looking for, but it does not translate well (yet) with my Edge Animate environment.

Link to comment
Share on other sites

HI and welcome to the GreenSock forums.


I don't know enough about Edge to be able to troubleshoot this from just the code you provided.

I think a simple CodePen (without any Edge code) would be the best bet.

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