Animation & Easing

@ripl/core

Transition utilities and easing functions for smooth animations.

Overview

Classes: Transition

Interfaces: TransitionOptions

Type Aliases: Ease · TransitionCallback · TransitionDirection

Functions: computeTransitionTime · transition · createFrameBuffer

Constants: easeLinear · easeInQuad · easeOutQuad · easeInOutQuad · easeInCubic · easeOutCubic · easeInOutCubic · easeInQuart · easeOutQuart · easeInOutQuart · easeInQuint · easeOutQuint · easeInOutQuint

Transition class

A Task-based animation that drives a callback over time with easing, looping, and abort support.

class Transition extends Task

Properties:

Property	Type	Description
signal	AbortSignal	The AbortSignal associated with this task's controller.
hasAborted	boolean	Whether this task has already been aborted.
readonly __@toStringTag@81	string

Methods:

abort(reason: unknown): Transition

Aborts the task with an optional reason, triggering all registered abort callbacks.

Parameters:

Name	Type	Description
reason	unknown

then(onfulfilled: ((value: void) => TResult1 \| PromiseLike<TResult1>) \| null \| undefined, onrejected: ((reason: any) => TResult2 \| PromiseLike<TResult2>) \| null \| undefined): Promise<TResult1 \| TResult2>

Attaches callbacks for the resolution and/or rejection of the Promise.

Parameters:

Name	Type	Description
onfulfilled	((value: void) => TResult1 | PromiseLike<TResult1>) | null | undefined	The callback to execute when the Promise is resolved.
onrejected	((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined	The callback to execute when the Promise is rejected.

catch(onrejected: ((reason: any) => TResult \| PromiseLike<TResult>) \| null \| undefined): Promise<void \| TResult>

Attaches a callback for only the rejection of the Promise.

Parameters:

Name	Type	Description
onrejected	((reason: any) => TResult | PromiseLike<TResult>) | null | undefined	The callback to execute when the Promise is rejected.

finally(onfinally: (() => void) \| null \| undefined): Promise<void>

Attaches a callback that is invoked when the Promise is settled (fulfilled or rejected). The resolved value cannot be modified from the callback.

Parameters:

Name	Type	Description
onfinally	(() => void) | null | undefined	The callback to execute when the Promise is settled (fulfilled or rejected).

---

TransitionOptions interface

Configuration for a transition animation.

interface TransitionOptions {
    duration: number;
    ease: Ease;
    loop: boolean;
    delay: number;
    direction: TransitionDirection;
}

Properties:

Property	Type	Description
duration	number
ease	Ease
loop	boolean
delay	number
direction	TransitionDirection

---

Ease type

An easing function that maps a linear progress value (0–1) to an eased output value.

type Ease = (time: number) => number;

---

TransitionCallback type

Callback invoked on each animation frame with the current eased time value (0–1).

type TransitionCallback = (time: number) => void;

---

TransitionDirection type

The playback direction of a transition.

type TransitionDirection = 'forward' | 'reverse';

---

computeTransitionTime function

Computes the eased time value for a transition given elapsed time, duration, easing function, and direction.

function computeTransitionTime(elapsed: number, duration: number, ease: Ease, direction: TransitionDirection): number

Parameters:

Name	Type	Description
elapsed	number
duration	number
ease	Ease
direction	TransitionDirection

Returns: number

---

transition function

Creates and starts a frame-driven transition that invokes the callback with the eased time on each animation frame.

function transition(callback: TransitionCallback, options?: Partial<TransitionOptions>): Transition

Parameters:

Name	Type	Description
callback	TransitionCallback
options	Partial<TransitionOptions> | undefined

Returns: Transition

---

createFrameBuffer function

Creates a debounced requestAnimationFrame wrapper that cancels any pending frame before scheduling a new one.

function createFrameBuffer()

Returns: (callback: AnyFunction) => void

---

easeLinear const

Linear easing — no acceleration or deceleration.

const easeLinear: Ease

---

easeInQuad const

Quadratic ease-in — accelerates from zero velocity.

const easeInQuad: Ease

---

easeOutQuad const

Quadratic ease-out — decelerates to zero velocity.

const easeOutQuad: Ease

---

easeInOutQuad const

Quadratic ease-in-out — accelerates then decelerates.

const easeInOutQuad: Ease

---

easeInCubic const

Cubic ease-in — accelerates from zero velocity.

const easeInCubic: Ease

---

easeOutCubic const

Cubic ease-out — decelerates to zero velocity.

const easeOutCubic: Ease

---

easeInOutCubic const

Cubic ease-in-out — accelerates then decelerates.

const easeInOutCubic: Ease

---

easeInQuart const

Quartic ease-in — accelerates from zero velocity.

const easeInQuart: Ease

---

easeOutQuart const

Quartic ease-out — decelerates to zero velocity.

const easeOutQuart: Ease

---

easeInOutQuart const

Quartic ease-in-out — accelerates then decelerates.

const easeInOutQuart: Ease

---

easeInQuint const

Quintic ease-in — accelerates from zero velocity.

const easeInQuint: Ease

---

easeOutQuint const

Quintic ease-out — decelerates to zero velocity.

const easeOutQuint: Ease

---

easeInOutQuint const

Quintic ease-in-out — accelerates then decelerates.

const easeInOutQuint: Ease

---