JSPM

@darkroom.engineering/tempus

0.0.46
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5572
  • Score
    100M100P100Q10427F
  • License MIT

one rAF to rule them all

Package Exports

  • @darkroom.engineering/tempus

Readme

TEMPUS

Purpose

Tempus allows you to merge all your requestAnimationFrame (rAF) loops in one for better performance and gives you better control over their execution priority.

Installation

$ npm i @darkroom.engineering/tempus

Usage

import Tempus from '@darkroom.engineering/tempus'

function onFrame(time, deltaTime) {
  // called every frame
}

// subscribe
const unsubscribe = Tempus.add(onFrame, 0)

// unsubscribe
unsubscribe()
// OR
Tempus.remove(onFrame)

Methods

  • add(callback, priority)
  • remove(callback)

Examples

Lenis

Tempus.add((time) => {
  lenis.raf(time)
}, 0);

React

import { useFrame } from '@darkroom.engineering/hamo'

function Component() {
  useFrame((time, deltaTime) => {
    // called every frame
  })
}

GSAP

gsap.ticker.remove(gsap.updateRoot);

Tempus.add((time) => {
  gsap.updateRoot(time / 1000);
}, 0);