Programmatically update the rotation draggable element position

[Lazymood]

Hi all,

I need to programmatically update the rotation draggable element position when the user click on the blue donut area visible on the CodePen.

I found the following solution that involve a gsap.to method, but  i'd prefer use something like draggable.snapTo(180deg)

Any suggestion?

Thanks, you're awesome

gsap.to("#controller", 1, {
        duration: 1,
        rotation: closest,
        ease: "back.out(1.4)",
        onUpdate: function () {
            draggable.rotation = closest;
            draggable.update(true) // doesn't work
        },
        onComplete: function () {
            draggable.vars.onThrowComplete.call(draggable);
        }
    });

 

See the Pen JjQRpoj?editors=0111 by lazymood (@lazymood) on CodePen

[Rodrigo]

Hi

 

As far as I know there is no way to tell a Draggable instance to update itself and make that update animated.

 

On that subject, what exactly is the problem with the approach in that codepen? Looks pretty solid to me. Keep in mind that you need to translate the position of the click event tan angle, you'll need some math to do that, there's no escaping that and the math in the demo is the simplest I can think of for this. The only thing I'd change is updating the Draggable instance in the onComplete callback and perhaps make the animation a bit shorter. Also we have short rotation as well, so you can definitely explore that as well.

 

Happy Tweening!

[Lazymood]

Thank you,

it would be desirable to have a method to update the instance state indeed. Isn't it? 

[Rodrigo]

12 hours ago, Lazymood said:

it would be desirable to have a method to update the instance state indeed. Isn't it? 

Care to elaborate on this please? What do you mean by updating the instance's state? That is exactly what the update method does, if I'm understanding you correctly:

https://gsap.com/docs/v3/Plugins/Draggable/update()

 

We discussed this as a team and we feel that the current way of either calling the update method on an onComplete or an onUpdate callbacks is the best possible approach for updating a Draggable instance, where the target's property that is affected by Draggable is updated outside of it.

 

Happy Tweening!