Update Over Time (uot)

Update Over Time (uot) is a tiny library to provide the easiest way for updating values over time. Provide a callback and a duration you're ready to go!

This utility can be useful for CSS animations, DOM changes, WebGL transitions or anything that can be updated based on a progress value.

It's basically a setTimeout (or setInterval) with progress.

Features:

• Small in size, no dependencies
• Based on requestAnimationFrame
• Optimized for multiple instances

Install

$ npm install --save uot

Usage

Import the library:

import updateOverTime from 'uot';

Provide a callback and a duration:

updateOverTime((progress) => {
  // Progress value: 0 ... 1
  if (progress === 1) {
    // Handle complete
  }
}, 2000);

As a third parameter an optional repeat count can be provided.

Use the progress value to update the DOM (or anything):

updateOverTime((progress) => {
  // Add easing to the progress value
  progress = easeInOutQuad(progress);
  // Output the progress value to the DOM
  document.body.textContent = progress.toFixed(2);
}, 4000);

At any given time only a single requestAnimationFrame will be called.

License

MIT © Colin van Eenige