🦁 A tiny 200b timeout alternative with progress.
Branch: master
Clone or download
Latest commit 3c32603 Jan 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Add demo! Jan 11, 2019
src Micro optimizations. Jan 12, 2019
.gitignore Initial commit! Jan 9, 2019
LICENSE Initial commit! Jan 9, 2019
README.md Initial commit! Jan 9, 2019
package.json 1.1.0 Jan 15, 2019

README.md

Update Over Time (uot)

npm version gzip size license dependencies

Update Over Time (uot) is a 200b 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 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);

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