Draggable rotate API?

[b0dg4n]

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)` ?

[GreenSock]

Oh, sure, you can just animate it:

 

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

 

Is that what you mean?

[b0dg4n]

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?

[GreenSock]

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. 

[b0dg4n]

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.

[OSUblake]

Your animations aren't aware of your draggable. You can use the ModifiersPlugin if want to use the same function.

 

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

 

[b0dg4n]

@@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?

[OSUblake]

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

[b0dg4n]

perfect - that sorts it out. Thank you

[b0dg4n]

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

[OSUblake]

Maybe like this. 

 

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