ulysse
/
Website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Syncronized sound and animation and cleaner interruption

This commit is contained in:
Ulysse Cura 2026-03-08 13:37:13 +01:00
parent d8aef442a4
commit fd9d19d275
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
scripts/session_startup_animation.js
View File

@ -9,10 +9,13 @@ function waitForAnimationEnd(elem, animationName)
resolve();
}
}
elem.onanimationend = handleAnimationEnd;
});
}
let sound = new Audio("../assets/game-boy-advance-startup-sound.mp3");
async function sessionStartupAnimation()
{
// Page setup
@ -48,11 +51,10 @@ async function sessionStartupAnimation()
text_elem.className = "startup-animation-text";
text_elem.innerHTML = quote.text;
let sound = new Audio("../assets/game-boy-advance-startup-sound.mp3");
sound.play();
document.body.appendChild(text_elem);
sound.play();
await waitForAnimationEnd(text_elem, "text-animation");
// Fade out for both
@ -73,8 +75,13 @@ async function sessionStartupAnimation()
function interruptStartingAnimation()
{
// Bad but works in this context
window.location.reload();
let author_elem = document.body.querySelector(".startup-animation-author");
author_elem.getAnimations().forEach((animation) => animation.finish());
let text_elem = document.body.querySelector(".startup-animation-text");
text_elem.getAnimations().forEach((animation) => animation.finish());
sound.currentTime = 2.75;
}
window.onkeydown = () => {

2
styles/session_startup_animation.css
View File

@ -66,7 +66,7 @@
width: 100%;
top: 25%;
text-align: center;
animation: text-animation 2.5s ease-in-out, opacity-fade-in 1s;
animation: text-animation 3s ease-in-out, opacity-fade-in 1s;
}
.startup-animation-author {