Smooth rotation before animation starts

[Kulsgam]

The codepen I've linked shows the issue I'm facing ().

 

I want to have a smooth rotation before the autoRotate of the animation kicks in. The autoRotate causes the rotation of the div to immediately jump to the rotation needed at the start. Hence, I calculated the rotation needed using trigonometry. However, that rotation seems to be a tad bit more than what's needed. 

Clicking on the div would trigger the animation. If you look closely after clicking the calculated rotation animation kicks in, but then it jumps to the autoRotate rotation and causes a jitter of sorts. This shouldn't be happening if I calculate the rotation correctly. But I can't seem to figure out how to.

Is there a better way than calculating the rotation? Or am I doing this wrong? Thanks in advance

See the Pen bGQrjXw by Kulsgam (@Kulsgam) on CodePen

[Cassie]

Hiya - gsap.getProperty() might be the one here!

 

I'm always up for the lazy way ✨

See the Pen PoxJZxp?editors=1111 by GreenSock (@GreenSock) on CodePen

[Kulsgam]

Hi @Cassie, thanks for the reply. Is there a way for me to get the rotation property of x before it undergoes the animation? The reason for this is because the rotation will change depending on the screen sizes in my main app as the `upMove` and `leftMove` variables will also change. One thing I can think of is that I duplicate the HTML element while setting the opacity to 0, then use gsap.set to move that transparent element. Get the rotation and then do the main animation. However, that seems a bit overkill and I'm wondering if there is a more elegant solution. 

[GreenSock]

How about this?: 

See the Pen dyQVRwQ?editors=0010 by GreenSock (@GreenSock) on CodePen