I’m trying to make a javascript animation with window.requestAnimationFrame
. It should be triggered when a button is clicked (like the “dropping” animation of a dropdown menu appearing). I use the variable timeElapsed
to calculate the time since the button is clicked, and calculate the new height of the object with timeElapsed. I pass the time when the button is clicked (start
) as an argument of the function. According to my console, although start
(computed outside the function) is computed correctly, for some reason it changes to the time since the page is loaded once it is passed into the function.
Here’s what I have so far:
function mobileAppear(sTime) {
console.log(sTime); //Prints milliseconds since page is loaded
currTime = new Date().getTime();
timeElapsed = (currTime - sTime)/1000;
newHeight = timeElapsed*10 ;
wishlist.style.height = newHeight + "vh";
if (newHeight < 66){
window.requestAnimationFrame(mobileAppear);
}
}
function toggleView() {
//Some code here
var start = new Date().getTime();
console.log(start); // works fine
if (window.innerWidth < 768){
mobileAppear(start);
}
}
What’s the problem here and how to fix that?
*Note: there’s probably another mistake in the chunk of code, but for now I’m trying to fix this one.