Delayed synchronization between CSS animation timing and JavaScript carousel interval causes a slight lag

Question

Delayed synchronization between CSS animation timing and JavaScript carousel interval causes a slight lag

I am currently working on a slider where one dot grows and another one follows suit. However, I have encountered a strange issue. I set the interval option to 2000ms for the slider and the CSS timing to 2000ms.

div.bubble {
    height: 100px;
    border-radius: 1em;
    width: 100px;
    animation: vars 2000ms infinite ease-in-out; //here the timing is the same as the interval
}

Upon loading the page, the animation and slider initially appear synced, but as the animation continues, a slight lag starts to show in the slideshow. It seems like either the animation is too fast or the slideshow is too fast.

https://jsfiddle.net/pas14r8g/9/

I have provided a fiddle link for better clarity of the situation. Despite trying Swiper, Flickity, and Splide sliders, all seem to exhibit the same issue.

The bug is quite subtle, not noticeable within the first 4 loops, but it gradually appears and worsens.

What I have observed is that the slider consistently lags by 3ms or 4ms. Adjusting the value of the interval option did not resolve this perfectly.

javascript css animation css-animations splidejs

Answer 1

Answer №1

Simply put: The setInterval function sends a periodic request to the window object, instructing it to execute the designated callback function every x milliseconds.

It's important to note that the execution is not guaranteed to occur precisely at x milliseconds; rather, it will happen sometime after x milliseconds have elapsed.

There's always a possibility of the execution taking longer than x, with potential delays of up to 600 milliseconds.

To address this issue, utilizing requestAnimationFrame might be more suitable, as it runs approximately 60 times per second. By keeping track of frame deltas or using an accumulator, you can trigger your desired action after a specific time interval (x milliseconds).

If you observe the code snippet below for a while, you'll notice occasional lag in the output.

function hi() {
  console.log("Hi");
}

function hello() {
  console.log("Hello");
}

let t = Date.now();

function update() {
  if ((Date.now() - t) > 1000) {
    hello();
    t = Date.now();
  }
  requestAnimationFrame(update);
}
update();
setInterval(hi, 1000);

Answer 2

Simply put: The setInterval function sends a periodic request to the window object, instructing it to execute the designated callback function every x milliseconds.

It's important to note that the execution is not guaranteed to occur precisely at x milliseconds; rather, it will happen sometime after x milliseconds have elapsed.

There's always a possibility of the execution taking longer than x, with potential delays of up to 600 milliseconds.

To address this issue, utilizing requestAnimationFrame might be more suitable, as it runs approximately 60 times per second. By keeping track of frame deltas or using an accumulator, you can trigger your desired action after a specific time interval (x milliseconds).

If you observe the code snippet below for a while, you'll notice occasional lag in the output.

function hi() {
  console.log("Hi");
}

function hello() {
  console.log("Hello");
}

let t = Date.now();

function update() {
  if ((Date.now() - t) > 1000) {
    hello();
    t = Date.now();
  }
  requestAnimationFrame(update);
}
update();
setInterval(hi, 1000);

Delayed synchronization between CSS animation timing and JavaScript carousel interval causes a slight lag

Answer №1

Similar questions

Optimal asset management strategies for Angular applications

What causes the shift in the position of the div element?

Having trouble with Vee-validate Basic example - undefined errors issue

How to create a Bootstrap panel that collapses on mobile devices and expands on desktop screens?

Angular Promises - Going from the triumph to the disappointment callback?

Why is my PHP function not able to properly receive the array that was sent to it via Ajax?

Display issue with alert box

Ways to remove unwanted line breaks following PHP code within HTML documents

Receiving server data with socket.io in Node.js

What is the best way to refresh the content in a table on all HTML pages?

"Troubleshooting a problem with the height of a collapsible div

What is the purpose of utilizing "({ })" syntax in jQuery?

When attempting to make an AJAX call using the console, an error was encountered stating that the function $.ajax is not available

Ensure the footer remains fixed while scrolling

"Ensuring a mobile-friendly website menu's z-index is

Is there a way for me to discover the identity of the victor?

Leveraging Multiple Angular.js Controllers within a Shared DOM

Shortcut to prevent false 0 values

Canceling ongoing Angular HTTP request does not stop

The listener for @ok is not being activated when using jest-test-utils with b-modal in vue-bootstrap