Jump to content
GreenSock

dudetteontheedge

draggable - 2 spin wheels sync and sound issue

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

 

post-18834-0-46498900-1405011114_thumb.png

 

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

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

Now the only problem is syncing the 2 wheels.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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});  
}

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

[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

Link to comment
Share on other sites

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!

  • Like 2
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.
×