Skip to content

Rule · Lint

Element enters from scale(0)

lint/scale-zero-entrywarnvoid lintupdated

Why it matters

Nothing in the physical world appears from zero size; scale(0) entrances look like a pop and draw the eye too hard. Starting from ~0.95 with opacity reads as the element arriving.

How to fix it

Start from scale: 0.95 (0.9 for small popovers) combined with opacity: 0, using an ease-out curve.

Example

tsx
<m.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.18, ease: [0.16, 1, 0.3, 1] }} />

References

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.