Jump to content
Search Community

Transition for rotation on click event

christiangeyerII test
Moderator Tag

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

Hi Christian,

 

Doesn't seem possible from what I have tested. We had similar question where users wanted to snap to mouse on click. You can read about what the code does in following thread,

 

I modified it to animate but there are some issues, like if you click instead of dragging which is if you lift mouse before transition completes, your mouse keeps dragging still, and I didn't find any way to get around it. Fixed it by setting allowNativeDefaults to check if mouse is down.

 

See the Pen KREXEX?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

You can also use proxy target and use it's value for transitioning and dragging.

 

See the Pen pVYdYG?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

 

But all this might be possible to simplify if @GreenSock adds another event before onPress, which we can use to do any calculations and snapping. And ability to hold the onPress event until we decide to trigger it. For example, onBeforePress we can do the transition and once our tween completes use the onComplete event to trigger onPress.

  • Like 1
Link to comment
Share on other sites

I must be too sleep-deprived because I read the question about 5 times and looked at the codepen and I still don't understand what's being asked. You seem to be using a set() call but expecting an eased animation. Why? And why did you add CSS transitions to something that's being controlled with JS? I'd strongly recommend avoiding that. 

 

Wouldn't it be as simple as changing your set() to a to() call and adding a duration? Again, I'm sure I'm missing something obvious. 

 

Quote

But all this might be possible to simplify if @GreenSock adds another event before onPress, which we can use to do any calculations and snapping. And ability to hold the onPress event until we decide to trigger it. For example, onBeforePress we can do the transition and once our tween completes use the onComplete event to trigger onPress.

 

Are you saying that you want Draggable to fire a different event before onPress...and not run its onPress logic (even though there's a press)? Again, I'm struggling to understand the logic here (likely because I'm in a bit of a rush and not able to fully concentrate at the moment). Any chance you could explain it like I'm a 5-year old? :)

  • Haha 1
Link to comment
Share on other sites

Ya I was hoping an event that will fire before onPress.

  1. On mousedown, fire beforePress that will let user set the position or rotation of target.
  2. Only then fire the mechanism of onPress internally to record values of target like position, rotation etc.
Draggable.create(target, {
  type: "rotation",
  beforePress: function() {
    // run logic to snap target to mouse before draggable starts recording values of target
  }
});

 

And for the second part where I was saying to hold the onPress, following snippet might explain it better.

 

Draggable.create(target, {
  type: "rotation",
  holdOnPress: true,
  beforePress: function() {
    // run same logic to snap target to mouse but let user animate the target
    TweenMax.to({}, 0.3, {
      onComplete: function() {
        this.initiateOnPress();
        // The initiateOnPress method is going to be different than startDrag and it will skip beforePress event
      }
    });
  }
});

 

 

Link to comment
Share on other sites

Ah, I see. Thanks for the sample code that illustrates things.

 

Well, I don't think that'll work because Draggable needs an original MouseEvent/TouchEvent/PointerEvent in order to read coordinates and figure out exactly what to listen to. It also has to figure out if it should preventDefault() on the element, allow native touch scrolling, etc. There's a bunch of logic tied to that onPress event, so it's not as simple as just calling initiateOnPress(). Typically you can't fake an event either because certain events are flagged as "trusted" (coming from the user for real) for security reasons.

 

I wish I had better news. 

Link to comment
Share on other sites

  • 3 months later...

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