Modificando un poco lo que tienes, se puede hacer así (el mover elegantemente hasta el centro te lo dejo pendiente): <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> var pos = $('#center').position(), radiusSat = $('#sat1').width() * 0.5, radius = $('#center').width() * 0.5, cx = pos.left + radius, cy = pos.top + radius, x, y, angle = 0, angles = [], spc = 360 / 5, deg2rad = Math.PI / 180; let clicked=0; console.log(pos); for(let i = 0; i < 5; i++) { //let por var, importante! angles.push(angle); angle += spc; $(`#sat${i+1}`).click(function () { clicked=i+1; }); } /// space out radius radius += (radiusSat + 10); loop(); function loop() { for(var i = 0; i < angles.length; i++) { angle = angles[i]; x = cx + radius * Math.cos(angle * deg2rad); y = cy + radius * Math.sin(angle * deg2rad); $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat}); angles[i] = angles[i] + 1; if (angles[i] > 360) angles[i] = 0; } if (!clicked) { requestAnimationFrame(loop); } else { requestAnimationFrame(moveToCenter); } } function moveToCenter() { let clickedDiv=$(`#sat${clicked}`); let position=clickedDiv.position(); let centerX=position.left+25; let centerY=position.top+25; if (centerX > cx) { centerX-=1; } else if (centerX<cx) { centerX+=1; } if (centerY > cy) { centerY-=1; } else if (centerY<cy) { centerY+=1; } if (Math.abs(centerY-cy) > 1 || Math.abs(centerX-cx)>1) { clickedDiv.css({left:centerX-25, top:centerY-25}) requestAnimationFrame(moveToCenter); } } <!-- language: lang-css --> div { border-radius:50%; border:2px solid #000; position:fixed; } #center { width:200px; height:200px; left:100px; top:100px; } #sat0, #sat1, #sat2, #sat3, #sat4 { width:50px; height:50px; } <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="center"></div> <div id="sat0"></div> <div id="sat1"></div> <div id="sat2"></div> <div id="sat3"></div> <div id="sat4"></div> <!-- end snippet -->