How can I create a continuous loop for an animation? To better illustrate my question, please refer to the example on W3Schools where a box moves from top to bottom and then halts.
http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3
I am struggling to find out how to ensure this box animation repeats endlessly. In other words, once it reaches the bottom, it should return to its starting point and continue the animation indefinitely.
Here are some ways to modify the JS code:
var element = document.getElementById("animate");
var position = 0;
var identifier = setInterval(moveFrame, 10);
function moveFrame() {
if (position == 150) { position = 0; }
position++;
element.style.top = position + 'px';
element.style.left = position + 'px';
}#container { width: 200px; height: 200px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; }<div id ="container">
<div id ="animate"></div>
</div>Replace the clearInterval(id); command, which stops the animation timer, with pos = 0; to reset the box's position every time it reaches a corner.
Modify the script as shown below to prevent it from pausing. The use of 'runAlready' is necessary to control the appearance of the second rectangle, and setting pos=0 within the if statement positions the rectangle at the top left corner.
let run = false;
function moveElement() {
if(!run) {
run = true;
let element = document.getElementById("animate");
let position = 0;
let animationId = setInterval(moveFrame, 5);
function moveFrame() {
if (position == 350) {
position = 0;
} else {
position++;
element.style.top = position + 'px';
element.style.left = position + 'px';
}
}
}
}
Utilizing the setInterval(frame, 5) function instructs the program to execute the frame() function every 5 milliseconds, resulting in the creation of an animation.
On the other hand, when the clearInterval(id) function is invoked, it halts the ongoing animation.
An intriguing addition has been made below. By introducing a variable called 'direction,' the code alters the box's movement direction. Instead of bringing the animation to a stop once the box reaches the lower right corner, it switches the direction and continues its path.
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
var direction = 1;
function frame() {
if (pos == 0){
direction = 1;
} else if(pos == 350){
direction = -1;
}
pos += direction;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
This marks the beginning of a website I am currently creating for a client. Check it out here Here's the issue. I initiated this project some time back and upon returning to it, I'm facing difficulty in changing font styles without using inline ...
Currently, I'm in the process of developing a web app using Django Channels and WebSockets. My goal is to dynamically generate Bootstrap toasts (https://getbootstrap.com/docs/4.2/components/toasts/) when a WebSocket connection is established. However, ...
I am facing an issue with sending a complex JavaScript array to my asp.net mvc6 controller method. I have tried two different methods to pass the data, but neither seem to be working for me. public IActionResult TakeComplexArray(IList<ComplexArrayInfo ...
I have a button in my iframe that opens a div on the same page: <li> <input type='button' id='hideshow2' class='radiobutton' value='Core' onclick="showDiv('#content2')"> </li> <di ...
I'm seeking assistance with a specific task. I have an object structured as shown below: SOMEKEY: { "key1": val1, "key2": val2 } Additionally, I have an array that contains string values like this: [stringA, stringB, stringC ...
Once upon a time, I used to create a plethora of buttons using a for loop. The title[] array was filled with numerous values. export const renderButtons1 = (numOfBtns,title,navigate) => { const views1 = []; for ( var i = 0; i < numOfBtns; ...
TLDR; Seeking solution to render child components in React even if a property of this.props is missing. My React app utilizes Yahoo's Fluxible and fetches data from a Wordpress site using WP REST API. Sometimes, the API may return incomplete data cau ...
I found this code online, but I'm struggling to comprehend its functionality. In order to make any edits for my needs, I need to understand how it operates. The purpose of this script is to close a panel with an upward slide animation when the "x" but ...
Hello everybody! I am currently creating a dynamic form for editing specific classes, but I am facing an issue with the ajax call not working. Below is the HTML code for the form: <form id="userDataForm" name="userDataForm" th:acti ...
I've been attempting to stream the output of a nodejs child process through grpc, but I consistently receive an empty result. Here is my proto file: syntax = "proto3"; package servicePackage; service Mobile { rpc sign(Empty) returns ( ...
Is there a way to make Vue re-initialize itself after inserting a component fetched from an API into the DOM? The component looks like this: <div><My_component /></div> This component is part of a back-end snippet. When inserting it i ...
The issue I'm encountering is specific to Material UI and IPad, requiring a change in the component used from MUI. Currently, I am utilizing the Input component from Material UI. Upon clicking on the input, the IPad keyboard opens and automatically ...
Is there a method to access mobile connectivity settings through a website? I am interested in determining the connection type (3G\4G\WiFi) and if it is WiFi, identifying the security method being used. Is this achievable? If so, how? Edit: If ...
I've been attempting to utilize a post request for inserting data into MongoDB using Mongoose, but I keep encountering an issue where req.body is undefined. The document gets inserted into the database, but only the default Object ID is included. Thi ...
I have the following JSON data and I'm trying to determine the number of objects with Status: 1 in the JSON. The approach I've taken so far is not working. I understand that ng-filter should only be applied to Arrays, but I'm struggling to ...
This plugin that I'm currently using is working flawlessly: However, I'm unsure about how to make the arrows stationary and prevent them from moving. Currently, they are centering themselves based on the height of the div, but I want them to rem ...
I have a question regarding the popup slide functionality. I would like to achieve the following: Currently, I am using the following code to display post details upon clicking: function getPostDetails(id){ var infoBox = document.getElementById("in ...
Hey there, I appreciate your time and assistance. I am currently working on parsing an XML file located in the "res/raw" folder and passing the parsed result to another class for further processing. However, I seem to be stuck and unable to find a solution ...
I have a function that loads the DataTable once the document is loaded. $(document).ready(function() { var $dataTable = $('#example1').DataTable({ "ajax": 'api/qnams_all.php', "dataType": "json", "bDestroy": true, "s ...
I'm experiencing an issue with my cookie script on the following website: Upon visiting my site, you'll come across a hidden <div id="popupDiv"> Due to the display: none property in the CSS, it's not visible as intended. However, it ...