Orbit animation without element rotating

Question

I am making a model of the solar system where all the planets are orbiting the sun. I am doing this with the following code:

.neptuneOrbit {
  --time: 19;
  --dist: 2.76;
  --size: .85;
  z-index: 2;
}
.orbitContainer {
width: 10rem;
  --timeunit: 10s;
  --offsetunit: 30vmin;
  --sizeunit: 5vmin;
  
  position: absolute;
  top: calc(50% - calc(var(--size) * var(--sizeunit)));
  --offset: calc(var(--dist) * var(--offsetunit));/* distance from the center */
  left: calc(50% - var(--offset)); 
  width: calc(2 * var(--offset));
  animation: circleRound calc(var(--time) * var(--timeunit)) linear   infinite;
}
.orbitContainer .inner {
  
  position: relative;
  width: calc(calc(2 * var(--size)) * var(--sizeunit));
  height: calc(calc(2 * var(--size)) * var(--sizeunit)); 
  border-radius: 50%;
  border-style: none;
 
}

@keyframes circleRound {
  100% {
    transform: rotate(360deg);
  }
}

And in app.js

<div className="orbitContainer neptuneOrbit"> <MiniPlanet className="neptuneMini inner" name="neptune" /></div>

The miniPlanet component only holds the textures.

The issue is that when the planets are orbiting, they are also rotating 360 degrees. So that the north or south pole eventually face the sun. I am trying to have the planets orbit in a "fixed" position to where they will face the same direction while going in a circle. I cannot accomplish this without breaking the orbit animation however.

Instead of simply rotating the planets, use requestAnimationFrame to animate their positions (calculate x and y using cosine & sine of the angle) — , Feb 11 '21 at 23:23
So where would I use ```requestAnimationFrame```? Would I replace the keyframe animation with it? I have never used it before. And my animation is based off of that answer, I didn't see a solution to this in there. — imstupidpleasehelp, Feb 11 '21 at 23:30
if you are talking about the link I shared, your animation is based on it. My answer is using a complete different technique where there is not the issue you described (run the code and see) — Temani Afif, Feb 11 '21 at 23:33
You're right, I should have taken a closer look. I will try to adapt this to my code. Would this method be possible with different distances for each of the objects? — imstupidpleasehelp, Feb 11 '21 at 23:42
It may be worth removing the link to your repo - it has been substantially modified since this question was written, and thus readers may not get the right impression of what your code was like when this question was asked. — halfer, Apr 07 '22 at 22:51

score 1 · Accepted Answer · answered Feb 11 '21 at 23:54

Based on my previous answer you can do like below. The text is only to illustrate that the circle remain in the same direction:

#container {
  width: 200px;
  height: 200px;
  margin: 40px auto;
  display:grid;
  place-content: center;
  background:radial-gradient(farthest-side,blue 90%,transparent) center/10px 10px no-repeat;
}

.item {
  grid-area:1/1;
  width:var(--s);
  height:var(--s);
  margin:auto;
  text-align: center;
  border-radius: 50%;
  background: #f00;
  color:#fff;
  font-weight:bold;
  animation: spin var(--d) linear infinite; 
  transform:rotate(0) translate(var(--o)) rotate(0);
}
@keyframes spin {
  100% {
    transform:rotate(1turn) translate(var(--o)) rotate(-1turn);
  }
}

<div id="container">
  <div class="item" style="--d:5s;--o:65px;--s:40px;">1</div>
  <div class="item" style="--d:6s;--o:150px;--s:20px;">2</div>
  <div class="item" style="--d:10s;--o:90px;--s:10px;">3</div>
  <div class="item" style="--d:2s;--o:30px;--s:30px;">4</div>
</div>

Orbit animation without element rotating

1 Answers1