ad-hoc-motion

A transition or animation written ad hoc.

Group

Text

Runs

Optional: run it with ur lint --rule ad-hoc-motion

Level

warning

Reads

Every file

Fix

None: how the motion system should express it is the author's to say

Why

The line declares a transition or animation property, or @keyframes, where it is used. Motion written ad hoc cannot be tuned in one place, or turned off for readers who ask for reduced motion. Keep it in the project's motion system. The rule reads style sheets, HTML, and component source as Straitjacket's motion rule reads them, and runs where [lint.ad-hoc-motion] turns it on; its exclude globs name the files of the motion system.

The fix, as Ur suggests it: centralize motion so it can be tuned or turned off in one place.

For agents

Declare no ad-hoc transitions or animations; use the project's centralized motion system.

.cart-drawer {
  position: fixed;
  right: 0;
  transform: translateX(100%);
  transition: transform 300ms ease-out;
}

.cart-drawer.open {
  transform: translateX(0);
}

$ ur lint --rule ad-hoc-motion
warning[ad-hoc-motion]: ad-hoc motion `transition`
  --> ./src/styles/drawer.css:5:3 `transition`
  = hint: centralize motion so it can be tuned or turned off in one place
0 clone classes and 1 text finding in 1 file