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.
You want to let window.requestAnimationFrame handle your timestamps for you see below:
Here is the part of the MDN docs that I've had to follow in the past
const wishlist = document.getElementById('wishlist')
const button = document.getElementById('button')
button.addEventListener('click', toggleView)
let startTime
function mobileAppear(curTime) {
if (startTime === undefined) startTime = curTime
const timeElapsed = (curTime - startTime)/1000;
const newHeight = timeElapsed * 10;
wishlist.style.height = newHeight + "px"; // I changed this to pixels for the example
if (newHeight < 66){
window.requestAnimationFrame(mobileAppear);
}
}
function toggleView() {
//Some code here
// let requestAnimationFrame handle sending the current timestamp
window.requestAnimationFrame(mobileAppear)
}
button.addEventListener('click', toggleView)<div id="wishlist" style="width: 200px; height: 1px; margin: 10px; background: red"></div>
<button id="button">Toggle View</button>The problem of your code is that requestAnimationFrame will pass a DOMHighResTimeStamp to the callback function, in this case, mobileAppear. So sTime will not be the same as you get at toggleView.
You can move the start and sTime out like this:
let sTime = 0;
function mobileAppear() {
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
sTime = new Date().getTime();
console.log(sTime); // works fine
if (window.innerWidth < 768){
mobileAppear();
}
}
Nevertheless, DOMHighResTimeStamp can be treated as elapsedTime. So a better way to solve your problem might be:
function mobileAppear(timeElapsed=0) {
// console.log(sTime);
// 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
// sTime = new Date().getTime();
// console.log(sTime); // works fine
if (window.innerWidth < 768){
window.requestAnimationFrame( mobileAppear );
}
}
Let me know if this works.