AnimationConfig

Grid-wide animation configuration. Controls global animation behavior - individual plugins define their own animation styles. Duration and easing values set corresponding CSS variables on the grid element.

Example

// Enable animations regardless of system preferences
grid.gridConfig = {
  animation: {
    mode: 'on',
    duration: 300,
    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
  },
};

// Disable all animations
grid.gridConfig = {
  animation: { mode: 'off' },
};

// Respect user's reduced-motion preference (default)
grid.gridConfig = {
  animation: { mode: 'reduced-motion' },
};

Properties

Property	Type	Description
mode?	AnimationMode	Global animation mode.
duration?	number	Default animation duration in milliseconds. Sets --tbw-animation-duration CSS variable.
easing?	string	Default easing function. Sets --tbw-animation-easing CSS variable.

Property Details

mode

Default: 'reduced-motion'

---

duration

Default: 200

---

easing

Default: 'ease-out'

---

See Also

• AnimationMode for mode options