tempus

tempus copied to clipboard

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);