Rolling animation to calculate roll based on viewport width?

[floop]

Hello everyone!

 

So my goal is so animate a logo rolling in from the right side of the view to the center on page load. Ive got the math for doing this by finding the circumference of the image on load and then calculating how many rolls that circumference should take to get across 50vw. Often times, as you can see in the attached codepen, the degrees it needs to rotate are not divisible by 360 and so in turn it leaves the image not oriented properly. I can calculate the degrees offset that it needs to start from, but when i try to animate from there, for lack of better words,  it skips all the rotations and instead takes the shortest path between the two degrees. In the codepen i have a line for my attempt to animate from the start degree, and a line without that so you can see both. Thank you very much to anyone who can help.

See the Pen XWVQmLJ by 0xfloop (@0xfloop) on CodePen

[OSUblake]

Welcome to the forums @floop

 

I didn't check your math, but I think you just need to add the rotation into the from part. Also, you should never animate transform directly. It's better to use GSAP's built in transform properties like x, y, xPercent, yPercent, scale, scaleX, scaleY, skewX, skewY, rotation, etc.

 

See the Pen VwyOXjo by GreenSock (@GreenSock) on CodePen

 

[floop]

1 hour ago, OSUblake said:

Welcome to the forums @floop

 

I didn't check your math, but I think you just need to add the rotation into the from part. Also, you should never animate transform directly. It's better to use GSAP's built in transform properties like x, y, xPercent, yPercent, scale, scaleX, scaleY, skewX, skewY, rotation, etc.

 

 

 

 

You are a legend thank you