Accessible Animations API

This release adds a new API to support accessible animations in renature. Consumers now have a first-class API for defining the from / to configuration to use if a user has the prefers-reduced-motion: reduce media feature enabled.

To enable accessible animations, add a reducedMotion configuration object with from / to keys in your hook's configuration, like so:

const [props] = useFriction<HTMLDivElement>({
  from: {
    transform: 'scale(1) rotate(0deg)',
  },
  to: {
    transform: 'scale(1.5) rotate(720deg)',
  },
  reducedMotion: {
    from: {
      opacity: 0,
    },
    to: {
      opacity: 1,
    },
  },
});

With this configuration, a user who specifies prefers-reduced-motion: reduce will see opacity animated from 0 to 1. Likewise, a user whose device or operating system does not implement the prefers-reduced-motion media feature will see opacity animated from 0 to 1. In this way, we enable the accessible animation by default. Finally, if a user has prefers-reduced-motion: reduce and no reducedMotion object is specified, the user will see no animation and the animated object will be immediately transitioned to the to state in a single frame update.

Added

• ✨ The reducedMotion configuration object was added to support accessible animations on useFriction, useFrictionGroup, useGravity, useGravityGroup, and useFluidResistance and useFluidResistanceGroup hooks. PR by @parkerziegler here.

Fixed

• Storybook was upgraded from v5 to v6. PR by @gingeriffic here.
• All demos on the /gallery route of the docs site were moved to CodeSandbox. PR by @gingeriffic here.

Diff