ReducedMotion

Reduced motion, as Motion does it: under it, a run's positional keys, the transforms and an element's position and size, land where the run would end, and every other key, an opacity or a colour, animates as ever. applies says whether it's on, split divides a target by its Environment's PositionalKeys, and snap lands the positional ones.

import * as ReducedMotion from "@wardic/core/ReducedMotion"

if (ReducedMotion.applies(config, prefersReducedMotion)) {
  const { positional, rest } = ReducedMotion.split(target, positionalKeys)
  // positional keys land through ReducedMotion.snap(from, to); the rest animate as usual
}

Classes

PositionalKeys

An Environment's Positional keys: the keys that move or resize its elements, which reduced motion lands at once. Core names only the transforms (transformsOnly); an Environment adds its own, as @wardic/dom adds the keys that size and place an element's box.

Extends

Context.Service

Properties

isPositional

readonly isPositional: (key) => boolean;

Whether reduced motion Snaps key.

Parameters

key

string

Returns

boolean

Interfaces

SnapOptions

snap's options.

Properties

delay?

readonly delay?: number;

Seconds to hold from before landing on to. Default 0.

Split

A run's target, split by an Environment's PositionalKeys.

Properties

positional

readonly positional: Values;

The keys reduced motion snaps.

rest

readonly rest: Values;

The keys that animate either way.

Type Aliases

Config

type Config = "user" | "always" | "never";

An app's reduced-motion setting (Motion's MotionConfig reducedMotion): "user" follows the user's preference, as their Environment reports it, "always" reduces motion whatever it is, and "never" animates whatever it is. A binding's default is "user"; Motion's is "never".

Variables

transformsOnly

const transformsOnly: Layer.Layer<PositionalKeys>;

Positional keys with only the transforms: core's own, and the Test Environment's.

Functions

applies()

function applies(config, prefersReducedMotion): boolean;

Whether reduced motion applies under config, given whether the user prefers reduced motion. A binding reads it as each element's animation starts.

Parameters

config

Config

prefersReducedMotion

boolean

Returns

boolean

endOf()

function endOf<A>(
   from, 
   to, 
   options
): A;

Where a Machine.animate run from from to to with options ends, which its snap lands on (Motion's getFinalKeyframe): to, or from with reverse; with a repeatType that turns ("reverse", "mirror") and an odd finite repeat, the other one, since its last run goes backwards. A run that repeats forever never ends, and lands where its first run does (Motion's last keyframe).

Type Parameters

A

A

Parameters

from

A

to

A

options

Modifiers

Returns

A

isTransform()

function isTransform(key): boolean;

Whether key is a transform (BaseValue.TRANSFORM_IDENTITY's keys): Wardic's own, positional in every Environment.

Parameters

key

string

Returns

boolean

snap()

function snap<A>(
   from, 
   to, 
   options?
): Machine<Frame<A>>;

Reduced motion's landing: from until delay seconds have passed, then to, settled. It lands on the frame a Machine.delay of the same length starts its run, so a key that lands does so with the keys that animate; with no delay, on its first frame.

const land = ReducedMotion.snap(0, 240, { delay: 0.1 })

split()

function split(values, keys): Split;

Split a run's target into the keys reduced motion snaps, by keys, and the rest.