Michaël Garcia Posted April 26, 2022 Share Posted April 26, 2022 I like to create a drag effect that makes my shape rotate around a circle. It works great, I'm also using the quickTo method to add some cool easing on it. My issue is that when the rotation is complete, it all starts again by reverting. I'd like to keep my current position and go back to 0 directly. Should I kill and recreate my quickTo tween when I'm beyond the complete rotation ? Thank you See the Pen JjMQmJJ by michaelgrc (@michaelgrc) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted April 26, 2022 Solution Share Posted April 26, 2022 Hi Michael, Have you seen the new Observer plugin? You can simply some of your event handling with it. 😉 https://greensock.com/docs/v3/Plugins/Observer As far as the rotation goes, you'd have to do some math to get it to work correctly, kind of like what is shown in this post for making a generic directionalRotation plugin. The code in that pen that is inside the if statement for short is what you would need to do. Or just use the built-in directional rotation, but you'd need to use a regular tween. gsap.to(this.elRotation, { rotation: `${degree}_short`, overwrite: true }) See the Pen mdpZQEZ by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
OSUblake Posted April 26, 2022 Share Posted April 26, 2022 Also, the y component for atan2 goes first. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2#syntax const radians = Math.atan2(e.clientY - this.center_y, e.clientX - this.center_x); const degree = (radians * (180 / Math.PI)); 3 Link to comment Share on other sites More sharing options...
Michaël Garcia Posted April 26, 2022 Author Share Posted April 26, 2022 Indeed, the observer plugin worth definitely it in my case! Thanks for the advice. Also I didn't know about the "_short" trick, thit is literally awesome. Thanks again for your time! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now