Jump to content
GreenSock

captainlardnicus

Combining draggable and rotation?

Go to solution Solved by OSUblake,

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 was super excited when I saw the demo, but now I'm trying to combine rotate and drag (kinda like playing cards, or a table of photos maybe) and am starting to run into problems.

 

I know this is probably not what it was originally designed for, and maybe there's a better way or a better plugin for this, but I thought I'd pop this up anyway as a kind of curveball request.

 

Has anyone done this before? Is there a better way?

 

Thanks!

See the Pen myajrQ by captainlardnicus (@captainlardnicus) on CodePen

Link to comment
Share on other sites

  • Solution

Hi captainlardnicus

 

You were on the right track, but you had some CSS positioning problems going on.

 

If you want more control, you can manually create the rotation when onDragEnd is called using the ThrowPropsPlugin. This will allow you to adjust things like the angular velocity or its transform origin.

 

See the Pen KwbxNX by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

And here would be an example of manually creating your own throw. This one is setup so both the rotation and x/y throws end at the same time.

 

See the Pen ByvqwV by osublake (@osublake) on CodePen

Link to comment
Share on other sites

The code you had to end the rotation and x/y at the same time was interfering with TweenMax's ability to reset the rotation.

 

You can see this in this fork with a reset tween onclick:

See the Pen dPwwXE by captainlardnicus (@captainlardnicus) on CodePen

 

Dragging and dropping without throw will restore the correct rotation when you click the cube.

Throwing the cube will upset this and the correct rotation of 0 will not occur.

 

But having them end separately didn't really bother me too much, it was getting them to play well together.

 

Thanks for your help OSUBlake and Diaco.AW!

Link to comment
Share on other sites

As a followup, here's what I ended up with in the end: 

See the Pen jEXXqw by captainlardnicus (@captainlardnicus) on CodePen

 

It's not box2dweb (where the pivot point follows the mouse cursor with "weight" of the object spinning it around) but it is also much simpler, and applies directly to a DOM object.

Link to comment
Share on other sites

You can see this in this fork with a reset tween onclick: http://codepen.io/captainlardnicus/pen/dPwwXE

 

Dragging and dropping without throw will restore the correct rotation when you click the cube.

Throwing the cube will upset this and the correct rotation of 0 will not occur.

 

But having them end separately didn't really bother me too much, it was getting them to play well together.

 

There had been a problem in ThrowPropsPlugin that caused the overwriting behavior, but that was fixed about a week ago. If you refresh your cache and try that codepen again, you should see that it works fine :) 

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