JSFiddle - React, Tailwind, and code Playground
HTML
<div id="start"></div>
<div id="end"></div>
<div id="mail"></div>
CSS
div { position: absolute; }
#start { width: 5px; height: 5px; background: #fbc42b; top: 250px; left: 50px; }
#end { width: 5px; height: 5px; background: #fa0218; top: 50px; left: 150px; }
#mail { width: 50px; height: 20px; background: blue; top: 250px; left: 50px; }
JavaScript
// Init dom elements
var $start = $('#start');
var $end = $('#end');
var $mail = $('#mail');
// Get position coordinates
var startPos = $start.position();
var endPos = $end.position();
// Angle calculation
var getAngle = function(currX, currY, endX, endY) {
var angle = Math.atan2(currX - endX, currY - endY) * (180 / Math.PI);
if (angle < 0) {
angle = Math.abs(angle);
} else {
angle = 360 - angle;
}
return angle;
};
// Mail angle
var getMailAngle = function() {
var currPos = $mail.position();
var endPos = $end.position();
return getAngle(currPos.left, currPos.top, endPos.left, endPos.top);
};
// Animate
$mail.animate({top: endPos.top, left: endPos.left}, {
specialEasing: {left: "easeInSine", top: "linear"},
duration: 8000,
// Executed each "animation" frame, so we rotate here.
step: function() {
var angle = getMailAngle();
$(this).css('transform', 'rotate(' + angle + 'deg)');
}
});