Tips for transferring an item to a different location using JavaScript and CSS animation

Question

Tips for transferring an item to a different location using JavaScript and CSS animation

I am attempting to implement a coin collection animation into the cart using only JavaScript and Vue.js. I decided to use raw JavaScript for this purpose after initially following a tutorial on W3schools at https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3

Somewhere in my code, there is a destination div representing the cart as shown below:

<div class="coin" id="coin" @click="collect()">

And elsewhere, I have another div that needs to be animated towards the "coin" div:

<div id="animate">
</div>

Here is the CSS styling used:

.coin {
  background-image: 
  url("https://i.pinimg.com/originals/15/ce/a6/15cea65c1fadcfcb144f3b41e32bd9b3.png");
  background-size: 100% 100%;
  border-radius: 100%;
  height: 80px;
  position: relative;
  width: 80px;
  -webkit-transition: 2s linear;
  -webkit-transform-style: preserve-3d;
 }

#animate {
   width: 50px;
   height: 50px;
   position: absolute;
   background-color: red;
  }

Below is the JavaScript function being utilized:

collect(){
    var elem = document.getElementById("animate");   
    var pos = 0;
    var id = setInterval(frame, 5);
      function frame() {
         if (pos == 350) {
         clearInterval(id);
     } else {
          pos++; 
          var testDiv = document.getElementById("coin");
          elem.style.top = testDiv.offsetTop; 
          elem.style.left = testDiv.offsetLeft; 
      }
    }
        }

I encountered issues with the animation not working properly as intended according to the left-right properties of the destination div. Any assistance in resolving this issue would be greatly appreciated.

javascript html css vue.js jquery-animate

Answer 1

Answer №1

To start, make sure you specify the units by adding px to both the top and left properties.
Instead of using offset, consider using getBoundingClientRect as it provides the position based on the page rather than the parent element.
When animating an element over multiple steps, remember to move the element incrementally towards its final position in each step instead of trying to directly move it to the final destination from the beginning.

Here's a recommended approach (with reduced number of steps) for achieving the desired animation:

function animate(){
    var elem = document.getElementById("animate");  
    var target = document.getElementById("target");
    var diffX = target.getBoundingClientRect().left - elem.getBoundingClientRect().left;
    var diffY = target.getBoundingClientRect().top - elem.getBoundingClientRect().top;
    var dx = diffX / 350;
    var dy = diffY / 350;
    var pos = 0;
    var id = setInterval(moveElement, 5);
    function moveElement() {
         if (pos == 350) {
         clearInterval(id);
     } else {
          pos++; 
          elem.style.top = (parseFloat(elem.style.top)||0) + dy + 'px'; 
          elem.style.left = (parseFloat(elem.style.left)||0) + dx + 'px'; 
      }
    }

}

.target {
  background-image: url("https://i.pinimg.com/originals/15/ce/a6/15cea65c1fadcfcb144f3b41e32bd9b3.png");
  background-size: 100% 100%;
  border-radius: 100%;
  height: 80px;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  transition: 2s linear;
}

#animate {
   width: 50px;
   height: 50px;
   position: absolute;
   top:0;
   left:0;
   background-color: red;
}

<div class="target" id="target" onclick="animate()"></div>
<div id ="animate"></div>

If you prefer using requestAnimationFrame with a recursive function for the animation, you can also try this alternative method:

var elem = document.getElementById("animate");  
var target = document.getElementById("target");
var rate = 1/75;
var diffX, diffY;
function animate() {
    diffX = target.getBoundingClientRect().left - elem.getBoundingClientRect().left;
    diffY = target.getBoundingClientRect().top - elem.getBoundingClientRect().top;
    move();
}
function move() {
  if(Math.abs(target.getBoundingClientRect().left - elem.getBoundingClientRect().left) < diffX*rate) return;
  elem.style.top = (parseFloat(elem.style.top)||0) + diffY*rate + 'px'; 
  elem.style.left = (parseFloat(elem.style.left)||0) + diffX*rate + 'px'; 
  requestAnimationFrame(move);
}

.target {
  background-image: url("https://i.pinimg.com/originals/15/ce/a6/15cea65c1fadcfcb144f3b41e32bd9b3.png");
  background-size: 100% 100%;
  border-radius: 100%;
  height: 80px;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  transition: 2s linear;
}

#animate {
   width: 50px;
   height: 50px;
   position: absolute;
   top:0;
   left:0;
   background-color: red;
}

<div class="target" id="target" onclick="animate()"></div>
<div id ="animate"></div>

Answer 2

To start, make sure you specify the units by adding px to both the top and left properties.
Instead of using offset, consider using getBoundingClientRect as it provides the position based on the page rather than the parent element.
When animating an element over multiple steps, remember to move the element incrementally towards its final position in each step instead of trying to directly move it to the final destination from the beginning.

Here's a recommended approach (with reduced number of steps) for achieving the desired animation:

function animate(){
    var elem = document.getElementById("animate");  
    var target = document.getElementById("target");
    var diffX = target.getBoundingClientRect().left - elem.getBoundingClientRect().left;
    var diffY = target.getBoundingClientRect().top - elem.getBoundingClientRect().top;
    var dx = diffX / 350;
    var dy = diffY / 350;
    var pos = 0;
    var id = setInterval(moveElement, 5);
    function moveElement() {
         if (pos == 350) {
         clearInterval(id);
     } else {
          pos++; 
          elem.style.top = (parseFloat(elem.style.top)||0) + dy + 'px'; 
          elem.style.left = (parseFloat(elem.style.left)||0) + dx + 'px'; 
      }
    }

}

.target {
  background-image: url("https://i.pinimg.com/originals/15/ce/a6/15cea65c1fadcfcb144f3b41e32bd9b3.png");
  background-size: 100% 100%;
  border-radius: 100%;
  height: 80px;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  transition: 2s linear;
}

#animate {
   width: 50px;
   height: 50px;
   position: absolute;
   top:0;
   left:0;
   background-color: red;
}

<div class="target" id="target" onclick="animate()"></div>
<div id ="animate"></div>

If you prefer using requestAnimationFrame with a recursive function for the animation, you can also try this alternative method:

var elem = document.getElementById("animate");  
var target = document.getElementById("target");
var rate = 1/75;
var diffX, diffY;
function animate() {
    diffX = target.getBoundingClientRect().left - elem.getBoundingClientRect().left;
    diffY = target.getBoundingClientRect().top - elem.getBoundingClientRect().top;
    move();
}
function move() {
  if(Math.abs(target.getBoundingClientRect().left - elem.getBoundingClientRect().left) < diffX*rate) return;
  elem.style.top = (parseFloat(elem.style.top)||0) + diffY*rate + 'px'; 
  elem.style.left = (parseFloat(elem.style.left)||0) + diffX*rate + 'px'; 
  requestAnimationFrame(move);
}

.target {
  background-image: url("https://i.pinimg.com/originals/15/ce/a6/15cea65c1fadcfcb144f3b41e32bd9b3.png");
  background-size: 100% 100%;
  border-radius: 100%;
  height: 80px;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  transition: 2s linear;
}

#animate {
   width: 50px;
   height: 50px;
   position: absolute;
   top:0;
   left:0;
   background-color: red;
}

<div class="target" id="target" onclick="animate()"></div>
<div id ="animate"></div>

Tips for transferring an item to a different location using JavaScript and CSS animation

Answer №1

Similar questions

Reorder the Polymer dom-repeat element following a modification in the child component's value

Issue with font selection in Fabric.js

What could be causing the issue with my hour parameter in node-cron?

Display a timer on a webpage

How can I restrict a plugin to just one component in Nuxt.js?

Issues with XMLHttpRequest functionality

Achieving a jQuery event on elements that are generated dynamically, without the need to manually code

Issue with Angular custom directive compatibility in version 1.3.0

Display the cover image of the page as you scroll through the content

My data is not appearing with ng-repeat or ng-bind

Chart.js malfunctioning - Uncaught reference error:

The AJAX request functions properly when triggered by the .click() method, however, it encounters issues with

safari application is processing audio recordings with incorrect mime type as application/octate-stream

Arrangement of elements across rows and columns in a grid pattern

What is the procedure for obtaining the factory of an element in situations where the element's class is not

"Here's a neat trick for assigning the value of a div to a text box without any identifiers like id or

The submission of the HTML Form is experiencing difficulties in Internet Explorer 9

Absolute positioning with centering margins

The successful completion of the Ajax post method reveals a difference in the sequence in which data is posted and retrieved

Oh no! There seems to be an unexpected token "<" in my React Native project on Visual Studio Code