Draggable - rotation - callback on use of Tweenlite.to()

[mikefosbrook 0 Likes (Newbie)]

I have a dial I wish to retrieve the rotation value from after a submit button is clicked. A user can rotate the dial and upon clicking the button the dial should animate to the update position and the percentage value use the calculateAngle.

 

I've tried retrieving all manner of properties from the Spinner object itself and the tweenlite object but I can't get a dynamic value, always returns the end rotation value but I want it to poll the rotation in the same way that the percentage value updates when you directly interact with the dial.

 

The reason I want the value to animate is I wish to re-use the animated value to animate a pie chart type fill which will be overlaid on top of the dial.  

 

 

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

[Diaco 1,997 Likes (Superhero)]

Hi mikefosbrook 

 

try this :

function tweenCalc(){
calcPercent (Draggable.get(".circle").target._gsTransform.rotation);
};
$('.submit').on('click', function() {
TweenLite.to( $('.circle'), 1,{rotation:90,onUpdate:tweenCalc});
});

pls check this out :

 

See the Pen gbYVPN by MAW (@MAW) on CodePen

[mikefosbrook 0 Likes (Newbie)]

This is fantastic, thank you so much Diaco.AW. Gives me a lot to play about with now.