Utilities

Small standalone helpers used internally by the engines above, and exported for reuse in your own effects.

Range Mapping

mapRange() — linearly maps a value from one range into another.

function mapRange(
  value: number,
  from: [number, number],
  to: [number, number],
  clampResult?: boolean,
): number

Parameters

value

number · default: —

The value to map, expressed in the from range.

from

[number, number] · default: —

The input range value is currently expressed in.

to

[number, number] · default: —

The output range to map into.

clampResult

boolean · default: false

When true, keeps the result within to at the edges instead of extrapolating past them — handles an inverted to range (e.g. [100, -100]) correctly too.

Return value

number — the mapped value.

Example:

import { mapRange } from '@macrulez/inview-core'

mapRange(0.5, [0, 1], [0, 200]) // 100
mapRange(1.2, [0, 1], [0, 200], true) // 200 (clamped)

CSS Variable Binding

bindCSSVar() — writes a numeric progress value into a CSS custom property on an element, so the resulting visual effect can be composed in plain CSS.

function bindCSSVar(element: HTMLElement, name: string, value: number | string): void

Parameters

element

HTMLElement · default: —

name

string · default: —

The custom property name. A leading -- is added automatically if name doesn't already have one.

value

number | string · default: —

Return value

void

Example:

import { bindCSSVar } from '@macrulez/inview-core'

bindCSSVar(el, 'progress', 0.42) // sets el.style.setProperty('--progress', '0.42')

.card {
  opacity: var(--progress);
}

Reduced Motion Preference

prefersReducedMotion() — reads the prefers-reduced-motion media query.

function prefersReducedMotion(): boolean

Return value

boolean — false when window/matchMedia isn't available (SSR), otherwise window.matchMedia('(prefers-reduced-motion: reduce)').matches.

Value Clamping

clamp() — restricts a value to a [min, max] range.

function clamp(value: number, min: number, max: number): number

Parameters

value

number · default: —

min

number · default: —

max

number · default: —

Return value

number — value restricted to the [min, max] range.

Easing Presets

easings — a record of easing presets, applied to a 0..1 progress value before feeding it into an effect (a parallax offset, a CSS var, etc).

type Easing = (t: number) => number

const easings: Record<EasingName, Easing>
type EasingName = keyof typeof easings

Preset names: linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInSine, easeOutSine, easeInOutSine.

Example:

import { easings } from '@macrulez/inview-core'

const eased = easings.easeOutCubic(0.5)