Rotating Animation with CSS

[lewis712]

I’m trying to get my page to look like the demo page where I got the code from. My page seems to have the outer ring move on the page and not stay looping around the inner logo. How can i fix this?

My Page:
http://gtconcepts.co/test/index2.html

Demo Page:
http://jsfiddle.net/gecko_guy/5DqkV/18/

Thanks,
Andy

[Shikkediel]

The logo’s not centered… and the animation will stay in the middle of .spin-container, not so much the page itself. That has a width of 700 pixels and the logo’s parent is 267 wide. So it should be positioned (700-267)/2 = 217 from the left, not the 250 it currently is.

[lewis712]

That doesn’t seem to be working either….the outer ring is still moving around the logo…but not in a uniform manner.

[Paulie_D]

A Codepen.io demo would be much easier to debug than a remote link.

Help us help you.

[theadamparker]

Here’s a codepen demo showing the issue:

Rotating Animation with CSS

[lewis712]

Thank you for supplying that.

Andy

[lewis712]

As for the js in it…I’m not sure how that works with the numbers 220 and 130, can anyone explain?

[lewis712]

Anyone have any thoughts on this….could really use some help.

[bearhead]

I think there are a couple problems:

1. I’m not positive that in your version the logo is centered relative to the #rotator div. Maybe you need to investigate another method for centering the logo.
2. I think something isn’t right with your javascript – it doesn’t seem like it is positioning the “small circles” correctly. It may be because the script you’re using is designed for circles rather than ovals?

I put together this demo to demonstrate my two points. The red and yellow boxes are there so you can see how everything is centered. I removed your javascript and positioned the ovals with css (I used only four ovals to make the positioning easier math-wise).

http://codepen.io/kvana/pen/mPwZEK

[lewis712]

I see what you did there. I will investigate it further in the morning, but really need 6 ovals instead of just 4. Or maybe I could do 8 to keep everything square?

Thanks!

[bearhead]

ok, I looked at you javascript a little more and that does seem to be the issue. You can probably ignore what I wrote about the logo not being centered… I don’t think that is a problem anymore.

on lines 12 and 13 of your js I changed

x = 220 * Math.cos(angle) + 130;
y = 220 * Math.sin(angle) + 130;

to

x = 220 * Math.cos(angle) + 100;
y = 220 * Math.sin(angle) + 150;

and it seems to look ok now:
http://codepen.io/kvana/pen/oxwrmy

[lewis712]

GREAT!!! looks good, now if I need to make the circles bigger or into blocks or anything, what is the calculation for the 100 and 150 of lines 12 and 13?

[bearhead]

um… I actually don’t know lol. I just kind of guessed and those numbers seemed to work. Maybe someone with more JS or math knowledge could explain what’s going on.

The only thing I know for sure is that the numbers should be equal if the rotating things are circles or squares, and the numbers should be different if they are ovals or rectangles.

Sorry I can’t help more… trigonometric functions frighten and confuse me.

[Author]

Posts