What is causing my animation to jump when using the Web Animation API reverse() function?

I've come across various sources stating that when you call reverse() while an animation is playing, it should have the same effect as setting playbackRate to -1. However, in my case, using reverse() makes my animation behave erratically and jump around uncontrollably, whereas using playbackRate works perfectly fine. I really want to utilize reverse() because of its state-independent nature, but I'm struggling to understand why it's not cooperating for me.

I created a simple example of a rotating square on codesandbox, which you can view here:

Check out the example on CodeSandbox

Could I be overlooking something crucial, or is there more complexity involved in using reverse() than expected?

UPDATE:

  • It's possible that there may be a bug specific to CodeSandbox, as demonstrated by this fiddle created by @Kaiido, which seems to work flawlessly.

  • I am currently using Firefox 75.0 on MacOS. Interestingly, Chrome appears to handle the animation correctly without issues.

javascriptcssweb-animations

Answer №1

It's evident from the discussion on this GitHub thread that addressing jumpy behavior in CodeSandbox can be achieved by disabling the "Infinite loop protection" setting in the sandbox.config.json file. Additionally, for my specific case, I found that forking the project was necessary to ensure smooth functionality. It appears that this issue may not be related to Firefox.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The process of dynamically inserting input types into a <td> element using the innerHTML tag is not functioning properly in Internet Explorer

I am facing an issue with dynamically placing input types within a <td> tag - the innerHTML() method is not functioning properly in Internet Explorer, although it works fine in Mozilla. This is how I am inserting the input types using JavaScript, wi ...

javascripthtmlinternet-explorer

What is the method for retrieving the Java List containing custom class objects defined within the <s:iterator> tag in a JSP file from within my JavaScript function?

Within my jsp file, I am retrieving a List of objects from my java action class (struts2) and displaying them. Now, I need to access these list objects within my javascript method. How can I achieve this? The code in mycode.jsp: <script type="text/jav ...

javajavascriptjqueryiterator

Docz: Utilizing Typescript definitions for props rendering beyond just interfaces

We are currently using Docz to document our type definitions. While it works well for interfaces, we've run into an issue where rendering anything other than interfaces as props in Docz components doesn't seem to display properly. I'm seeki ...

javascripttypescripttypescript-typings

Accents marked with diacritics are not being detected + An issue occurred while

I'm currently working on putting together a Spanish dictionary by sourcing the definitions from www.rae.es. However, there are a couple of challenges I'm facing: One issue is that the search engine does not function properly with acute accent ...

phpjavascripthtmlhyperlinkhtml-parsing

Enabling hover effects to scroll divs only when interacted with

I am aiming to achieve two separate scrolling divs and I'm uncertain about the exact approach. Experimenting with various overflow properties has only resulted in one scrolling independently. .profile { width: 100%; display: flex; ...

javascriptcssreactjs

Is there a way to use a specific keyboard input to alter the characteristics of shapes on my webpage?

Is there a way to change certain attributes of a shape onscreen when a specific key is pressed by the user? For example, can I make it so that pressing "a" changes the color of the shape? I attempted to modify a mouse rollover event to work with the desir ...

javascripthtmlcss

How can I incorporate a second main app.js file in Node.js to improve the organization and cleanliness of my codebase?

Hello, I am currently using Node.js and the Express framework for my project. All of my server-side code is contained within my app.js file, which has become quite complex with almost 250 lines of code. Now, I need to add authentication functionality to my ...

javascriptnode.jsexpressauthentication

What is the purpose of the c() function in JavaScript?

I recently stumbled upon some interesting JavaScript code in the source of a web page: function fsb329142055() { var b=new Array(57,50,102,50,52,99,50,53,52,56,102,98,102,98,101,102,101,49,53,61,101,99,110,57,111,78,109,54,114,111,56,48,102,38,1 ...

javascripthtmlforms

Types of Data Encoded in Base64

Within an application I am developing, there is a feature for downloading files that are stored as Base64 strings. It is essential to correctly pair the data types with the corresponding files in order to ensure successful downloads. I thought I had sorte ...

javascriptbase64

This code snippet, document.location.search.replace('?redirect=', '').replace('%2F', ''), is failing to execute properly in Firefox

The functionality of document location search replace redirect to another page works in Chrome, however, document.location.search.replace('?redirect=', '').replace('%2F', ''); it does not work in Firefox; instead, ...

javascriptangularreactjs

Retrieving JSON Arrays in PHP through an AJAX Request

Having trouble extracting data from multiple arrays in an AJAX request. Can anyone help? Here's what I'm trying to send: https://i.stack.imgur.com/4MEL4.png Executing a jQuery AJAX POST to a PHP file, but uncertain how to retrieve the data. An ...

javascriptphpjqueryjsonajax

What could be causing my TypeScript code to not be recognized as CommonJS?

I rely on a dependency that is transpiled to ES6. My goal is to leverage ES2019 features in my own code. Ultimately, I aim to output ES6. This is how I set up my tsconfig { "compilerOptions": { "module": "CommonJS" ...

javascripttypescriptecmascript-6module

Unable to access placeholder information from the controller

I am new to implementing the mean stack. I attempted to view data from the controller, but encountered an error message in the web browser's console. Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.3/$controller/ctrlreg?p0=AppCtrl Stack ...

javascriptangularjshtmlexpress

Mask input in AngularJS

I am currently working on developing a custom directive for creating personalized masks for input fields. While there are other libraries available, I often need to create specific input formats tailored to the company's requirements (e.g., "OS.012-08 ...

javascriptangularjs

Are you experiencing issues with the .submit() function when used in conjunction with other

Currently, I am working on a survey form that incorporates JQuery to dynamically display or hide fields based on user selections. //FORM CONDITIONALS: This script is responsible for hiding all the helpfulness radios and only displaying them when "Yes" fo ...

javascriptjqueryhtmldom

Techniques, modules and functions in Javascript

How should I properly document this code snippet: // Define a collection of colors with methods colors = { // Define method for color red "red" : function() { // Do something... } // Define object for color black "black" : { // Add ...

javascript

How can you proactively rebuild or update a particular page before the scheduled ISR time interval in Next.js?

When using NextJS in production mode with Incremental Static Regeneration, I have set an auto revalidate interval of 604800 seconds (7 days). However, there may be a need to update a specific page before that time limit has passed. Is there a way to rebui ...

javascriptnode.jsnext.js

Configuring Proxy Settings for WebpackDevServer

I need assistance setting up a proxy using WebpackDevServer in my React/Node chrome extension. Currently, my server is running on localhost:4000, and the React frontend is on localhost:5000. When trying to access the route /api/user/ticket using Axios, I ...

javascriptnode.jsreactjswebpackwebpack-dev-server

Throw an error if the entry is not found in the Firebase database

I have an array containing various objects. Users should be able to access all objects using moduls/, and a specific one with moduls/$id. However, if the requested modul does not exist, the database should return an error to inform the client that there is ...

javascriptangularjsfirebasefirebase-realtime-databasefirebase-security

css position:absolute stacked

Looking for a solution, I'm trying to include a side menu (navbar) on my page by using position: fixed. However, I am facing an issue where all the HTML elements I attempt to add are ignoring it. Check out the positioning problem here. ...

htmlcss