Me gustaría animar tres div en un patrón de ruta triangular para que estén en bucle en un triángulo de esquina a esquina. Parece que no puedo hacer que funcione. Todavía falta algo.
El elemento de la esquina superior va a la esquina izquierda pero no se coloca exactamente en la posición de la esquina izquierda pero le faltan unos pocos píxeles.
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>El problema se debe al estilo de transform que se aplica a todos los elementos.
Debido a los valores porcentuales, la transformación se basa en el tamaño de cada elemento y es diferente para el1 y el2 , etc. Ver documentos :
Porcentajes: se refieren al tamaño del cuadro delimitador
También arreglé JS para establecer a la left: el2.left , por lo que después de la animación, el1 tomará el lugar de 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>