The Bug That Kept Coming Back in Framer Motion
This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry . Entiscore is an agent that audits a website's digital entity, checking schema markup, identity consistency, authority signals, and technical accessibility before returning a scored report. Somewhere along the way I decided the report needed some animation to it, scroll-triggered entrance animations built with…
The "Bug That Kept Coming Back" in Framer Motion involved a website audit tool named Entiscore that used animation with Framer Motion's whileInView. When the animation occurred, a Hero title on the landing page got stuck mid-animation, blurred, and offset, requiring a hard refresh to recover. A few days later, four feature cards on the homepage displayed the same issue, and it happened a third time in the product report's Evaluation by axis section.
The fix involved identifying a shared helper function called getVariants that returned a new object reference each time it ran, despite identical underlying values. This caused Framer Motion to interpret the variants as different, leading to animation sync issues. By defining constant CARD_VARIANTS and REDUCED_MOTION_VARIANTS objects outside the render path and using a ternary to switch between them, the animation bug was resolved.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
