JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div id="finish">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim repudiandae molestiae placeat consequatur fuga voluptate, incidunt velit deleniti cupiditate sed fugiat architecto modi odio, quam cumque vero ratione autem error.</div>

<button id="start">button</button>

<div id="fly-block"></div>

CSS

* {
    box-sizing: border-box;
}

body {
    margin-top: 120px;
    background-color: green;
}

#start {
    position: relative;
    z-index: 11;
}

#fly-block {
    position: absolute;
    z-index: 9;
    border-radius: 5px;
    background-color: red;
    transition: 300ms ease;
}

JavaScript

var fly = $('#fly-block');
var startBlock = $('#start');
var finishBlock = $('#finish');

var startWidth,
	startHeight,
    startOffsetTop,
    startOffsetLeft,
    finishWidth,
    finishHeight,
    finishOffsetTop,
    finishOffsetLeft;

function startPosition() {
	startWidth = $(startBlock).outerWidth();
    startHeight = $(startBlock).outerHeight();
    startOffsetTop = $(startBlock).offset().top;
    startOffsetLeft = $(startBlock).offset().left;
}
startPosition();

function finishPosition() {
	finishWidth = $(finishBlock).outerWidth();
    finishHeight = $(finishBlock).outerHeight();
    finishOffsetTop = $(finishBlock).offset().top;
    finishOffsetLeft = $(finishBlock).offset().left;
}
finishPosition();

function moveToStart() {
	$(fly).css({'top': startOffsetTop, 'left': startOffsetLeft, 'width': startWidth, 'height': startHeight});
}

function moveToFinish() {
	$(fly).css({'top': finishOffsetTop, 'left': finishOffsetLeft, 'width': finishWidth, 'height': finishHeight});
}

 moveToStart();
 



$( "#start" ).on( "click", function() {
	moveToFinish();
});