Jump to content
GreenSock

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

Draggable rotate API?

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

Hey,

 

I've got a simple draggable element:

 

Draggable.create('#wheel', {
  type: 'rotation',
  throwProps: true,
  dragClickables: true,
  snap: (endValue) => Math.round(endValue / rotationSnap) * rotationSnap
}

 

I'd like for this to rotate on init and also rotate on a button press. Is there a way to do something like `draggableElem.rotateTo(180)` ?

Link to comment
Share on other sites

Oh, sure, you can just animate it:

 

TweenMax.to("#wheel", 1, {rotation:180});

 

Is that what you mean?

  • Like 2
Link to comment
Share on other sites

1 hour ago, GreenSock said:

Oh, sure, you can just animate it:

 


TweenMax.to("#wheel", 1, {rotation:180});

  

Is that what you mean?

 

Yup - that works. I've added a `liveSnap` callback to the Draggable instance to keep track of which slice of the wheel is top-most. However, after calling the TweenMax rotation, the Draggable liveSnap callback does not trigger - would it be possible to do that?

Link to comment
Share on other sites

I'm confused. Can you provide a reduced test case in codepen that demonstrates what you're talking about? I can't imagine how/why doing a tween outside of Draggable would somehow affect liveSnap functionality when dragging. 

Link to comment
Share on other sites

9 hours ago, GreenSock said:

I'm confused. Can you provide a reduced test case in codepen that demonstrates what you're talking about? I can't imagine how/why doing a tween outside of Draggable would somehow affect liveSnap functionality when dragging. 

 

Sure  -  

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

 a codepen with what I am trying to do.

When the `TweenMax` animation is executed, the callback in `liveSnap` of the `Draggable` instance is not being called. In this case, the pen is just updating the value a the `p` tag underneath the wheel. In my project, there's a state update as the wheel spins, so a few other elements need to react to it.

Link to comment
Share on other sites

@@OSUblake that looks neat - I tried to import the `ModifiersPlugin` into my react project, but it's not included in the `bonus-files-for-npm-users` folder. Can you please let me know how to get this imported?

Link to comment
Share on other sites

It's not a bonus file, so you should be able to import it from "gsap/all" or "gsap/ModifersPlugin".

  • Like 3
Link to comment
Share on other sites

revisiting this - is it possible to have a button rotate the wheel 1 tick left/right?

 

EDIT:

 

OK, I've done this, but not sure it's the best way.

 

So,  here's my component:

 

constructor(props) {
    super(props)
    this.state = {
      currentRotation: 0
    }
  }
  componentDidMount() {
    const rotationSnap = 360 / 14
    Draggable.create('#wheel', {
      type: 'rotation',
      throwProps: true,
      dragClickables: true,
      snap: (endValue) => Math.round(endValue / rotationSnap) * rotationSnap,
      liveSnap: this.trackRotation
    })
  }
  rotateLeft = () => {
    TweenMax.to('#wheel', 0.5, {
      rotation: this.state.currentRotation - (360 / 14),
      modifiers: {
        rotation: this.trackRotation
      }
    })
  }
  rotateRight = () => {
    TweenMax.to('#wheel', 0.5, {
      rotation: this.state.currentRotation + (360 / 14),
      modifiers: {
        rotation: this.trackRotation
      }
    })
  }

  trackRotation = (value) => {
    this.setState({currentRotation: value})
    return value
  }

 

EDIT 2: 

 

OK, the only problem I see with this is if you call the rotateLeft/Right function repeatedly, before the rotation animation ended, the endValue will be offset

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