draggable - 2 spin wheels sync and sound issue

[dudetteontheedge]

I am working in edge animate version 2014

 

I am wondering if it is possible to have one wheel start spinning in sync with another wheel when it is dragged. I would like these wheels to be synchronized.

 

 

Next - I added sound but when the wheel is released the sound does not stop.

Below is my code:

var smallWheel = sym.$('smallWheel');
var bigWheel = sym.$('bigWheel');
Draggable.create(smallWheel, {
	type:"rotation", 
	throwProps:true,
	onDrag :function() { 
		sym.$("rattle")[0].play();
		Draggable.create(bigWheel, {type:"rotation", throwProps:true});
	},
	onRelease :function(){
		sym.$("rattle")[0].pause();
	}
});

[dudetteontheedge]

Ok. Using onDragEnd instead of onRelease, the sound does stop.

Now the only problem is syncing the 2 wheels.

[GreenSock]

Sure, if I understand your question properly, you could just use an onDrag to copy the rotation from one to the other so that they mirror each other. Example:

Draggable.create(smallWheel, {
  type:"rotation",
  throwProps:true,
  onDrag: syncBigWheel,
  onThrowUpdate: syncBigWheel,
  onDragEnd: function() {
    sym.$("rattle")[0].pause();
  }
});
var smallDraggable = Draggable.get(smallWheel);
function syncBigWheel() {
  TweenLite.set(bigWheel, {rotation:smallDraggable.rotation});
}

Does that help?

[dudetteontheedge]

Thank you very much for the answer. I will try to get this going.   

[dudetteontheedge]

I cannot get this to work. I suppose I need the plugin before it works, right?

Also another question:

I added the function directly on the onDrag because I have something else going on with it. 

Adapted code below:

sym.$("info").hide();
var smallWheel = sym.$('smallWheel');
var bigWheel = sym.$('bigWheel');

var rotationSnap = 45;
Draggable.create(smallWheel, {
	type:"rotation", 
	throwProps:true,
	snap:function(endValue) { 
        return Math.round(endValue / rotationSnap) * rotationSnap;
   },
   onDrag :function() { 
		sym.$("rattle")[0].play();
		sym.$("info").hide();
		TweenLite.set(bigWheel, {rotation:smallDraggable.rotation});
	},	

	//onDrag: syncBigWheel,
	onThrowUpdate: syncBigWheel,
	onDragEnd: function(){
		sym.$("rattle")[0].pause();
		sym.$("info").show();
	}
});
var smallDraggable = Draggable.get(smallWheel);
function syncBigWheel() {
  TweenLite.set(bigWheel, {rotation:smallDraggable.rotation});  
}

[GreenSock]

Any chance you could post your actual file(s) so we can see what's going on? It can be tough to troubleshoot blind. To attach a file (please zip it first), click the "More Reply Options" below.

 

The only thing you need the ThrowPropsPlugin for is the momentum-based motion after you release the mouse/touch - regular dragging should work fine without it. 

 

You are using the latest version of GSAP and Draggable, right? 

[GreenSock]

[note to others: dudetteontheedge sent me her files via email]

 

The problem was that you’re using a version of Draggable that’s about 1 year old! That one didn’t have the get() method, nor did it have the “rotation” property on Draggable instances. 

 

Once I updated your Draggable link/file, things seemed to work fine. 

 

http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js

[dudetteontheedge]

Awesome. Indeed it was the version of draggable. Sometimes I pull my hair because of my own doing–in this case a wrong verson! 

Thanks for being so alert!