Tween Three Divs With One Draggable

[JustinLBannister]

First time on Greensock and I'm having a bit of trouble finding the proper documentation to do what I'd like.

 

Basically on creating of the initial draggable I'd like to kick off two draggables at the same time.

 

Example above.

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

[Carl]

Hi and welcome to the GreenSock forums,

 

I think something went wrong when you created the demo. I don't see any html or css. 

Perhaps try again, or watch this video for some tips on creating a CodePen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[JustinLBannister]

Hi Carl, 

 

Guess I didn't save it correctly. Should be correct markup now.

 

If you take a look at the HTML I'm trying to move #timeline-inview and #timeline when I create the draggable for the #dial.

 

I'd like the dial to control all three, and then also be able to have the actual #timeline control the #dial as well. 

 

Does that make sense?

[JustinLBannister]

Forgive my newbieness.

[Carl]

This is a fairly advanced undertaking. The Draggable API does not have any hooks that directly support dragging multiple objects, however it is entirely possible.

 

 

Here is a basic demo that shows a dial controlling scroll position of a div and the scroll position of the div controlling the dial by using a few callbacks that fire when the dial is spun, or the scroll position changes:

http://codepen.io/GreenSock/pen/gnoDc?editors=001

 

When using multiple controls to affect multiple draggable things, the best bet is to create a single proxy object that is in charge of updating all the elements.

There is no better way to learn about this technique than to read Chris Gannon's excellent article here: http://greensock.com/cube-dial-tutorial

Be sure to study the CodePen demos and examples.

 

Just recently, OSUBlake created an awesome demo showing how Draggable items can stick to each other upon collision and then detach when the item being dragged leaves a container.

 

visit this pen: http://codepen.io/osublake/pen/bNJPwM and drag the black user1 div up until hits smacks with the red user block. pretty cool.

read about it here:

 

http://greensock.com/forums/topic/11552-draggable-object-picks-up-another-on-collision/

 

 

Please keep in mind that both Chris and Blake are easily among a small, select few of the top experts in using Draggable.

I share their work as inspiration and to show what is possible. 

 

If you are new to Draggable, I would strongly recommend starting small and studying the API docs so that you can better understand all the methods you can tap into. http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/

 

Also, I think the part about the timeline controlling the Draggable elements might be a bit tricky. Timelines work by recording start and end values in tweens, not quite visualizing how something can be dragged anywhere by a user and then also tweened with a timeline.

[JustinLBannister]

This is the perfect example I was looking for: 

See the Pen dPVVyz by GreenSock (@GreenSock) on CodePen

 

But I've altered the js to reflect my markup and now I'm getting a cannot read property 'rotation' of undefined on this line: 

 

destPosX = (this.target.className == 'dial') ? dial._gsTransform.rotation : timeline._gsTransform.x;

 

I'm pretty sure I've followed the instructions to a T.

[Carl]

Have you set the rotation of dial prior using TweenLite? That's the only way a _gsTransform object would exist.

Tough to say without seeing it.

[JustinLBannister]

Here's a Pen to the actual JS. 

 

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

[Carl]

Seems that pen is missing the HTML, CSS and GreenSock libraries. Can you update it or save it again?

[Carl]

on a second pass it looks like dial is a jQuery collection, not a DOM element.

the ._gsTransform gets put on the DOM element that is a target of the Draggable.

 

try

 

 

//select the first element in $("#dial")

dial[0]._gsTransform.rotation