I am working on some concentric circles that should rotate infinitely, until a user clicks on one of them, in which case it should stop the animated rotation and be draggable (rotation). Then, if a different circle is clicked, the new one should stop it's animation, but the previous one should start up again from the position where the user left it after dragging, but with it's original direction and speed.
I have managed to get the pausing/unpausing behavior working correctly, except for the fact that if the user drags a band a lot (say, rotating it around fully 2 or 3 times in the same direction), when the animation restarts, it's either going the wrong speed, or the wrong direction, or both.
The animation is this:
export const bandRotation = (element, rotateDir, rotateSpeed) => {
const rotateDeg = rotateDir === "right" ? 360 : -360;
const tl = new TimelineLite();
tl.to(element, rotateSpeed, {
transformOrigin: "50% 50%",
rotation: rotateDeg,
repeat: -1,
ease: Linear.easeNone
});
return tl;
};
I've tried a couple different ways of stopping and starting it:
if (this.props.paused) {
this.state.rotation.kill();
} else {
this.setState({
rotation: bandRotation(this.band, this.props.direction, this.props.speed)
});
}
and:
if (this.props.paused) {
this.state.rotation.pause();
} else {
this.state.rotation.invalidate();
this.state.rotation.restart();
}
both of which I would think would restart the animation normally, but again, it's either going the wrong speed, wrong direction, or both.
What can I do to ensure the animation restarts with the same speed and direction, no matter how the user drags the circle/band while the animation is paused?