https://github.com/calvin-ll/delay-by-animation-frame

A Promise wrapper around requestAnimationFrame
https://github.com/calvin-ll/delay-by-animation-frame

delay promise requestanimationframe

Last synced: over 1 year ago
JSON representation

A Promise wrapper around requestAnimationFrame

• Host: GitHub
• URL: https://github.com/calvin-ll/delay-by-animation-frame
• Owner: Calvin-LL
• License: mit
• Created: 2020-12-11T21:17:32.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-25T13:03:13.000Z (over 3 years ago)
• Last Synced: 2024-02-25T21:46:22.374Z (over 2 years ago)
• Topics: delay, promise, requestanimationframe
• Language: TypeScript
• Homepage:
• Size: 754 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# delay-by-animation-frame

[![npm](https://img.shields.io/npm/v/delay-by-animation-frame?style=flat)](https://www.npmjs.com/package/delay-by-animation-frame) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=flat)](https://opensource.org/licenses/MIT)

This library exports `() => new Promise((resolve) => requestAnimationFrame(resolve))`

Resolves to a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp) which is a `double`

## Install

Install with npm:

```bash

npm install delay-by-animation-frame

```

Install with yarn:

```bash

yarn add delay-by-animation-frame

```

## Example

```javascript

import delayByAnimationFrame from "delay-by-animation-frame";

async function animate() {

  const element = document.getElementById("element-id");

  let start;

  while (true) {

    const timestamp = await delayByAnimationFrame();

    if (start === undefined) start = timestamp;

    const elapsed = timestamp - start;

    if (elapsed > 2000) break;

    element.style.transform =

      "translateX(" + Math.min(0.1 * elapsed, 200) + "px)";

  }

}

animate();

```