css transform translate - move to another element position - css

Question

Given 2 elements on a web page, how can i animate one elements position so that it moves to the second element, which can be anywhere on the page.
Transform translate doesnt seem to work well as i would need to know the difference in the position of offset between the two elements.
Is there any pure css way to achieve this?
very similar to the animation on adding a product to the shopping cart on this page: https://www.triwa.com/en-gb/watches/family/current-collection/ivory-falken-steel-mesh/

Answer 1

You could do this sort of thing with transition. so the changing of the elements position is transitioned over 1 second or however long you want.
Example: 2 boxes, Box1 and Box2. On clicking box 2 we want it to shrink and move to box 1
HTML:
DEMO: https://jsfiddle.net/33m3t16d/1/
Hope this helps mate.
$('.box2').click(function() {
$(this).removeClass('box2');
$(this).addClass('box1');
});
.container {
position: relative;
}
.box {
background: #333;
border: 1px solid #fff
}
.box1 {
transition: all 1s;
position: absolute;
top: 0px;
left: 500px;
height: 20px;
width: 20px;
}
.box2 {
position: absolute;
top: 100px;
left: 0px;
height: 100px;
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>

Answer 2

Nope, there is not. You can't retrieve element positions of a random positioned element. You need to involve JS if you do not know the target position.
One approach would be, to read the target positions from the target element via JS and write a short CSS snippet into the page containing the transition rules. This way you may use JS to read and set the necessary position. But the animation itself is still rendered through the browser itself (while being defined in CSS).

Answer 3

I don't think there is a pure CSS way to calculate the x distance and y distance between 2 elements. You have to use JS for this. Calculate the distance between 2 elements in JS and translate the required element to the 2nd element using .css function

Answer 4

As others have said, theres no pure CSS way. however here is a jquery option that you can either use with the onclick="moveToElementPosition(this,'#target');" attribute
Or
$('#box2').click(function(){
moveToElementPosition('#elementToMove','#target');
});
This function will get the postion and size of the target and move your element to match. The speed it does it is dictated by the transition:all 1s;
Here's a demo: https://jsfiddle.net/33m3t16d/3/