Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JustinLBannister

Tween Three Divs With One Draggable

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

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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