Hey there, I'm new to web development and I've been working on a simple webpage with a text animation that moves from the top of the screen to the middle when the page loads. The animation itself is working fine, but I'm having trouble stopping the loop. Even though the animation stops visually, I suspect that the function is still looping in the background. This causes other elements on the page, like links, to malfunction because the JavaScript is technically still running. Any tips on how I can properly end the function? Thanks!
window.onload = Animation;
function Animation() {
// Get element and determine text's initial position.
var Element = document.getElementById("AnimationText");
var Position = -500;
var ID = setInterval(OnFrame, 20);
function OnFrame() {
if (Position > 50) {
clearInterval(ID);
} else {
if (Position > -100 && Position <= 0) {
Position = Position + 3; // Middle of animation
} else if (Position > 0) {
Position = Position + 2; // End of animation
} else {
Position = Position + 4; // Start of animation
}
Element.style.top = Position + 'px';
}
}
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave" rel="stylesheet">
<link href="HomepageStyle.css" rel="stylesheet" type="text/css">
<script src="HomepageAnimation.js"></script>
</head>
<body>
<div id="AnimationText">
<h1>TNT</h1>
</div>
<center>
<a href="LogIn.html">
<img src="_assets/LoginButtonHome.png" style="margin-right: 40px; margin-top: 400px;">
</a>
</center>
</body>
</html>