How do I set up animation to move elements around the circle?

Question

How do I set up animation to move elements around the circle?

I am trying to achieve what you see in the picture:

The image is here if it's a block for you: http://imgur.com/a/wVtgm

You can see only one icon here, but it is actually 4 icons, the image is the path that the icons should have.

I am creating a snippet or here is the Codepen

var outerBox = $('.eight-box'),
    boxHeight = $(outerBox).height(),
    boxWidth = $(outerBox).width();
function changeNumbers() {
  var pos1 = $('.pos-1'),
      pos2 = $('.pos-2'),
      pos3 = $('.pos-3'),
      pos4 = $('.pos-4');

  $('.col-1').addClass('pos-1');
  $('.col-1').removeClass('pos-4')
  $('.col-2').addClass('pos-2');
  $('.col-2').removeClass('pos-4')
  $('.col-3').addClass('pos-3');
  $('.col-3').removeClass('pos-4')
  
};
// var refreshId = setInterval(changeNumbers, 1500);
changeNumbers();

.eight-box {
	position: relative;
	display: block;
	margin: 1em auto;
	width: 16em;
  height: 16em;
  font-family: sans-serif;
  font-size: 20px;
  border: 1px solid;
  border-radius: 50%;
}
.fig-8 {
	display: block;
	position: absolute;
	color: #fff;
	width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  font-smoothing: antialiased;
	transition: all .5s linear;
  overflow: hidden;
  z-index: 5;
}

.col-1 {
	background: #1abc9c;
}
.col-2 {
	background: #9b59b6;
}
.col-3 {
	background: #27ae60;
}
.col-4 {
	background: #2c3e50;
}

.pos-1 {
	top: 30%;
	left: 93.75%;
}
.pos-2 {
	top: 66.25%;
	left: 88.75%;
}
.pos-3 {
	top: 72.92%;
	right: 83.125%;
}
.pos-4 {
	top: 19.58%;
	right: 88.75%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eight-box">
  <div class="fig-8 col-1 pos-4">1</div>
  <div class="fig-8 col-2 pos-4">2</div>
  <div class="fig-8 col-3 pos-4">3</div>
  <div class="fig-8 col-4 pos-4">4</div>
</div>

Run code Hide result

This is a description of what I should achieve:

1 - All icons should be in the same place when the page loads and this is where you can see the icon with the number 4.

2 - Then each icon should start its path in a circle, becoming anchored to its regular state / position. I mean: an icon with the number 3 starts its track, and then when it reaches its position, it should be inserted there and the same with other icons.

Now if you see a piece of code I did, the icons do some animation going to their original position after the page loads, but I can't get what I need and triggers the icons to return to its original position by going around the circle.

TL; DR: The icons start at the position with the icon number 4 when the page loads, and then the icons should return to their original position, moving in a circle from left to right.

For example: Icon 4 should remain where it is. The 3 should move downward around a few pixels around the circle. Etc.

So they should all lie to the left, moving to the right (for example, follow the leader) and end in the position they are in the picture or code / code.

Any suggestions?

+3

javascript jquery html css

NietzscheProgrammer 06 jul. 17 at 20:30

source to share

1 answer

G-Cyr · Answer 1 · 2017-07-07T12:42:32+0000

You can inspire yourself with these 2 pens with animation and transform:rotate()

.

This one with input elements to interact with: press 1 to show 2, 3, 4, 5. Then press 2, then 3, ... to see them go in a circle. After the first click, you can also operate them using the arrow keys. (The code snippet is slightly more optimized than the pen, in code.)

input[name="group"] {position:absolute; right:100vw}

.circle {
  position: relative;
  width: 50vh;
  height: 50vh;
  margin: 25vh auto;
  border: solid 1px;
  border-radius: 100%;
}

.rotate, .rotate label {transition:1s;}

.rotate {
  display: flex;
  align-items: flex-end;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  height: 60%;
  margin-left: -5vh;
  transform-origin: 5vh 0;
}
.rotate:first-child {z-index:1;}

.rotate label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10vh;
  height: 10vh;
  border: solid 1px;
  border-radius: 100%;
  background: #0095FF;
  cursor:pointer
}

/* one */
#one:checked ~ .circle #a {transform:rotate(120deg);}
#one:checked ~ .circle #a label {transform:rotate(-120deg);}

#one:checked ~ .circle #b {transform:rotate(90deg);}
#one:checked ~ .circle #b label {transform:rotate(-90deg);}

#one:checked ~ .circle #c {transform:rotate(60deg);}
#one:checked ~ .circle #c label {transform:rotate(-60deg);}

#one:checked ~ .circle #d {transform:rotate(30deg);}
#one:checked ~ .circle #d label {transform:rotate(-30deg);}

#one:checked ~ .circle #e {transform:rotate(0deg);}
#one:checked ~ .circle #e label {transform:rotate(-0deg);}

/* two */
#two:checked ~ .circle #b {transform:rotate(120deg);}
#two:checked ~ .circle #b label {transform:rotate(-120deg);}

#two:checked ~ .circle #c {transform:rotate(90deg);}
#two:checked ~ .circle #c label {transform:rotate(-90deg);}

#two:checked ~ .circle #d {transform:rotate(60deg);}
#two:checked ~ .circle #d label {transform:rotate(-60deg);}

#two:checked ~ .circle #e {transform:rotate(30deg);}
#two:checked ~ .circle #e label {transform:rotate(-30deg);}

#two:checked ~ .circle #a {transform:rotate(360deg);}
#two:checked ~ .circle #a label {transform:rotate(-0deg);}

/* three */
#three:checked ~ .circle #c {transform:rotate(120deg);}
#three:checked ~ .circle #c label {transform:rotate(-120deg);}

#three:checked ~ .circle #d {transform:rotate(90deg);}
#three:checked ~ .circle #d label {transform:rotate(-90deg);}

#three:checked ~ .circle #e {transform:rotate(60deg);}
#three:checked ~ .circle #e label {transform:rotate(-60deg);}

#three:checked ~ .circle #a {transform:rotate(390deg);}
#three:checked ~ .circle #a label {transform:rotate(-30deg);}

#three:checked ~ .circle #b {transform:rotate(360deg);}
#three:checked ~ .circle #b label {transform:rotate(-0deg);}

/* four */
#four:checked ~ .circle #d {transform:rotate(120deg);}
#four:checked ~ .circle #d label {transform:rotate(-120deg);}

#four:checked ~ .circle #e {transform:rotate(90deg);}
#four:checked ~ .circle #e label {transform:rotate(-90deg);}

#four:checked ~ .circle #a {transform:rotate(420deg);}
#four:checked ~ .circle #a label {transform:rotate(-60deg);}

#four:checked ~ .circle #b {transform:rotate(390deg);}
#four:checked ~ .circle #b label {transform:rotate(-30deg);}

#four:checked ~ .circle #c {transform:rotate(360deg);}
#four:checked ~ .circle #c label {transform:rotate(-0deg);}

/* five */
#five:checked ~ .circle #e {transform:rotate(120deg);}
#five:checked ~ .circle #e label {transform:rotate(-120deg);}

#five:checked ~ .circle #a {transform:rotate(450deg);}
#five:checked ~ .circle #a label {transform:rotate(-90deg);}

#five:checked ~ .circle #b {transform:rotate(420deg);}
#five:checked ~ .circle #b label {transform:rotate(-60deg);}

#five:checked ~ .circle #c {transform:rotate(390deg);}
#five:checked ~ .circle #c label {transform:rotate(-30deg);}

#five:checked ~ .circle #d {transform:rotate(360deg);}
#five:checked ~ .circle #d label {transform:rotate(-0deg);}

<input id="one" type="radio"  name="group" />
<input id="two" type="radio" name="group" />
<input id="three" type="radio" name="group" />
<input id="four" type="radio" name="group" />
<input id="five" type="radio" name="group" />

<div class="circle">
  <div id="a" class="rotate"><label for="one">1</label></div>
  <div id="b" class="rotate"><label for="two">2</label></div>
  <div id="c" class="rotate"><label for="three">3</label></div>
  <div id="d" class="rotate"><label for="four">4</label></div>
  <div id="e" class="rotate"><label for="five">5</label></div>
</div>

Run code Hide result

And this one with a demo animation:

.circle {
  height: 50vh;
  width: 50vh;
  border-radius: 100%;
  border: solid;
  margin: 25vh auto;
  position: relative;
}

.rotate {
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  margin-left: -5vh;
  display: flex;
  align-items: flex-end;
}

.rotate div {
  border-radius: 100%;
  border: solid;
  height: 10vh;
  width: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white
}

#a {
  transform-origin: 5vh 0;
  transform: rotate(120deg);
  animation: roundcircle 5s infinite;
}

#a  div {
  animation: roundcirclediv 5s infinite;
}

#b {
  transform-origin: 5vh 0;
  transform: rotate(90deg);
  animation: roundcircle 5s -1s infinite;
}

#b div {
  transform: rotate(-90deg);
  animation: roundcirclediv 5s -1s infinite;
}

#c {
  transform-origin: 5vh 0;
  transform: rotate(60deg);
  animation: roundcircle 5s -2s infinite;
}

#c div {
  transform: rotate(-60deg);
  animation: roundcirclediv 5s -2s infinite;
}

#d {
  transform-origin: 5vh 0;
  transform: rotate(30deg);
  animation: roundcircle 5s -3s infinite;
}

#d div {
  transform: rotate(-30deg);
  animation: roundcirclediv 5s -3s infinite;
}

#e {
  transform-origin: 5vh 0;
  transform: rotate(0deg);
  animation: roundcircle 5s -4s infinite;
}

#e div {
  transform: rotate(-0deg);
  animation: roundcirclediv 5s -4s infinite;
}

@keyframes roundcircle {
  0% {
    transform: rotate(120deg);
  }
  20% {
    transform: rotate(360deg)
  }
  40% {
    transform: rotate(390deg)
  }
  60% {
    transform: rotate(420deg)
  }
  80% {
    transform: rotate(450deg)
  }
  100% {
    transform: rotate(480deg);
  }
}

@keyframes roundcirclediv {
  0% {
    transform: rotate(-120deg);
  }
  20% {
    transform: rotate(-360deg)
  }
  40% {
    transform: rotate(-390deg)
  }
  60% {
    transform: rotate(-420deg)
  }
  80% {
    transform: rotate(-450deg)
  }
  100% {
    transform: rotate(-480deg);
  }
}

<div class="circle">
  <div id="a" class="rotate">
    <div>1</div>
  </div>
  <div id="b" class="rotate">
    <div>2</div>
  </div>
  <div id="c" class="rotate">
    <div>3</div>
  </div>
  <div id="d" class="rotate">
    <div>4</div>
  </div>
  <div id="e" class="rotate">
    <div>5</div>
  </div>
</div>

Run code Hide result

And if you're having a hard time understanding how it works, check out this one to see behind the magic curtain:

input[name="group"] {position:absolute; right:100vw}

.circle {
  height: 50vh;
  width: 50vh;
  border-radius: 100%;
  border: solid 1px;
  margin: 25vh auto;
  position: relative;
}

.rotate {
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  margin-left: -5vh;
  display: flex;
  align-items: flex-end;
}

.rotate div {
  border-radius: 100%;
  border: solid 1px;
  height: 10vh;
  width: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0095FF;
}

#a, #a div, #b , #b div, #c, #c div, #d, #d div, #e, #e div {transition:1s; box-shadow:0 0 5px}
#a, #b, #c, #d, #e {transform-origin:5vh 0;}
#a {z-index:1;}
label {cursor:pointer}

/* one */

#one:checked ~ .circle #a {transform:rotate(120deg);}
#one:checked ~ .circle #a div {transform:rotate(-120deg);}

#one:checked ~ .circle #b {transform:rotate(90deg);}
#one:checked ~ .circle #b div {transform:rotate(-90deg);}

#one:checked ~ .circle #c {transform:rotate(60deg);}
#one:checked ~ .circle #c div {transform:rotate(-60deg);}

#one:checked ~ .circle #d {transform:rotate(30deg);}
#one:checked ~ .circle #d div {transform:rotate(-30deg);}

#one:checked ~ .circle #e {transform:rotate(0deg);}
#one:checked ~ .circle #e div {transform:rotate(-0deg);}

/* two */

#two:checked ~ .circle #b {transform:rotate(120deg);}
#two:checked ~ .circle #b div {transform:rotate(-120deg);}

#two:checked ~ .circle #c {transform:rotate(90deg);}
#two:checked ~ .circle #c div {transform:rotate(-90deg);}

#two:checked ~ .circle #d {transform:rotate(60deg);}
#two:checked ~ .circle #d div {transform:rotate(-60deg);}

#two:checked ~ .circle #e {transform:rotate(30deg);}
#two:checked ~ .circle #e div {transform:rotate(-30deg);}

#two:checked ~ .circle #a {transform:rotate(360deg);}
#two:checked ~ .circle #a div {transform:rotate(-0deg);}

/* three */

#three:checked ~ .circle #c {transform:rotate(120deg);}
#three:checked ~ .circle #c div {transform:rotate(-120deg);}

#three:checked ~ .circle #d {transform:rotate(90deg);}
#three:checked ~ .circle #d div {transform:rotate(-90deg);}

#three:checked ~ .circle #e {transform:rotate(60deg);}
#three:checked ~ .circle #e div {transform:rotate(-60deg);}

#three:checked ~ .circle #a {transform:rotate(390deg);}
#three:checked ~ .circle #a div {transform:rotate(-30deg);}

#three:checked ~ .circle #b {transform:rotate(360deg);}
#three:checked ~ .circle #b div {transform:rotate(-0deg);}

/* four */

#four:checked ~ .circle #d {transform:rotate(120deg);}
#four:checked ~ .circle #d div {transform:rotate(-120deg);}

#four:checked ~ .circle #e {transform:rotate(90deg);}
#four:checked ~ .circle #e div {transform:rotate(-90deg);}

#four:checked ~ .circle #a {transform:rotate(420deg);}
#four:checked ~ .circle #a div {transform:rotate(-60deg);}

#four:checked ~ .circle #b {transform:rotate(390deg);}
#four:checked ~ .circle #b div {transform:rotate(-30deg);}

#four:checked ~ .circle #c {transform:rotate(360deg);}
#four:checked ~ .circle #c div {transform:rotate(-0deg);}

/* five */

#five:checked ~ .circle #e {transform:rotate(120deg);}
#five:checked ~ .circle #e div {transform:rotate(-120deg);}

#five:checked ~ .circle #a {transform:rotate(450deg);}
#five:checked ~ .circle #a div {transform:rotate(-90deg);}

#five:checked ~ .circle #b {transform:rotate(420deg);}
#five:checked ~ .circle #b div {transform:rotate(-60deg);}

#five:checked ~ .circle #c {transform:rotate(390deg);}
#five:checked ~ .circle #c div {transform:rotate(-30deg);}

#five:checked ~ .circle #d {transform:rotate(360deg);}
#five:checked ~ .circle #d div {transform:rotate(-0deg);}

<input id="one" type="radio"  name="group" />
<input id="two" type="radio" name="group" />
<input id="three" type="radio" name="group" />
<input id="four" type="radio" name="group" />
<input id="five" type="radio" name="group" />

<div class="circle">
  <div id="a" class="rotate">
    <div><label for="one">1</label></div>
  </div>
  <div id="b" class="rotate">
    <div><label for="two">2</label></div>
  </div>
  <div id="c" class="rotate">
    <div><label for="three">3</div>
  </div>
  <div id="d" class="rotate">
    <div><label for="four">4</label></div>
  </div>
  <div id="e" class="rotate">
    <div><label for="five">5</label></div>
  </div>
</div>

Run code Hide result

How do I set up animation to move elements around the circle?

More articles: