import { Tweener, motionDuration, setReducedMotion } from '@datamoc/mwg/core';
const tweener = new Tweener();
const panel = { x: -200, fill: 0 };
//a slide is decorative: with reduced motion it arrives at once. A health bar is meaningful:
//it still fills, only faster
void tweener.tween(motionDuration(0.4), (t) => {
panel.x = -200 + 200 * t;
});
void tweener.tween(motionDuration(0.4, 'meaningful'), (t) => {
panel.fill = t;
});
tweener.update(1 / 60); //once per frame
setReducedMotion(true); //a settings toggle: motionDuration now returns 0, and 0.12 when meaningful
The duration a motion should actually take.
A
decorativemotion (the default) collapses to zero under reduced motion, which is what "reduce" means for a slide, spin or zoom. Ameaningfulmotion, one that conveys state rather than moving the viewer through space, is shortened instead of deleted, so a health bar still visibly fills and a selection still visibly moves.