Animejs absolute div transition to position of another div

user_7962825 0
Viewed 458

I would like to animate three div's in a triangle path pattern so they are kind of looping in a triangle from corner to corner. I can't seem to make it to work. Something Is missing still.

Top corner element is going to the left corner but is not placing itself exactly at the position of the left corner but lacking like few pixels.

https://jsfiddle.net/nj1c2L8a/15/

const el1 = document.querySelector('.el1').getBoundingClientRect()
const el2 = document.querySelector('.el2').getBoundingClientRect()
const el3 = document.querySelector('.el3').getBoundingClientRect()

anime({
          targets: '.el1',
      top: el2.top,
      left: el1.left - el2.left,
      delay: () => 1000,
      loop: false,
      easing: 'linear',
});
body {
  background: black;
  padding: 0;
  margin: 0;
}

.el1 {
  position: absolute;
  background: red;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el2 {
  position: absolute;
  background: green;
  top: 70%;
  left: 15%;
  transform: translate(-50%, -50%);
}

.el3 {
  position: absolute;
  background: blue;
  top: 70%;
  left: 85%;
  transform: translate(-50%, -50%);
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div class='el1'>ELEMENT 1</div>
<div class='el2'>ELEMENT 2</div>
<div class='el3'>ELEMENT 3</div>

anime.js animation css javascript
1 Answers

The issue is caused by transform style which is applied to all elements.

Because of percentage values the transformation is based on size of each element and is different for el1 and el2, etc. See docs:

Percentages: refer to the size of bounding box

I also fixed JS to set left: el2.left, so after animation el1 will take the place of el2.

const el1 = document.querySelector('.el1').getBoundingClientRect()
const el2 = document.querySelector('.el2').getBoundingClientRect()
const el3 = document.querySelector('.el3').getBoundingClientRect()

anime({
          targets: '.el1',
      top: el2.top,
      left: el2.left,
      delay: () => 1000,
      loop: false,
      easing: 'linear',
});
body {
  background: black;
  padding: 0;
  margin: 0;
}

.el1 {
  position: absolute;
  background: red;
  top: 30%;
  left: 50%;
}

.el2 {
  position: absolute;
  background: green;
  top: 70%;
  left: 15%;
}

.el3 {
  position: absolute;
  background: blue;
  top: 70%;
  left: 85%;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div class='el1'>ELEMENT 1</div>
<div class='el2'>ELEMENT 2</div>
<div class='el3'>ELEMENT 3</div>

user_145968560
Related