Three frozen components, one helper: Framer Motion's whileInView can strand elements for good

Reference equality is the whole mechanism. The helper `getVariants` was called inline in the component body and returned a brand-new object on every render, even when the values inside were identical ^[6], and Framer Motion tracks the `variants` prop by reference rather than by deep equality ^[7]. Every re-render therefore handed the library what looked like a completely new set of animation variants.

That alone would produce a flicker. What makes it permanent is `viewport={{ once: true }}`. The transition to `visible` has to be triggered by the intersection observer callback, and the author's reading is that when a re-render swaps the variants object mid-transition or right as the observer fires, the animation state and the variants object fall out of sync: the component holds a `visible` state pointing at variants that no longer match what is being interpolated, and because the trigger only fires once there is no second chance to self-correct ^[8]. A one-shot trigger converts a race into a resting state.

Now the arithmetic the write-up leaves on the table. The anti-pattern was found in six files ^[10], and it announced itself in three components ^[3][4][5]. That leaves three call sites that carried the identical defect and were never observed failing ^[17]. Half the exposure was silent, which is the normal ratio for a race: it surfaces where render churn and scroll position happen to collide, not where the code is worst.

The reason the shared helper stayed invisible for two rounds is also worth naming. Before the fix, the breakage was reproducible but not consistently ^[12], and each local fix worked in isolation ^[15]. Against an intermittent race, rewriting one card's transition changes render timing, and a change in timing is indistinguishable from a repair if your test is "load the page and scroll." The first two fixes were not wrong so much as unfalsifiable.

The repair has no cleverness in it: variant objects hoisted to module-level constants, selected with a ternary instead of a function call, so the object reference stays stable across renders ^[9]. The author also searched for every call site of `getVariants` and its sibling `getStaggerVariants` before touching anything ^[11], and reports that afterwards every scroll-triggered reveal resolves correctly at every entry point he could find ^[13].

The transferable rule is narrower than "avoid inline objects in render." It is that a prop compared by identity, combined with a trigger that is configured to fire exactly once, has no error-recovery path at all. Wherever those two properties meet, a transient desync stops being a glitch and becomes the final rendered output until the document reloads. In this codebase the pair was introduced by the reduced-motion fallback ^[14], which is to say by the most conscientious code in the file.