react-doctor/no-inline-bounce-easing

Use `cubic-bezier(0.16, 1, 0.3, 1)` (ease-out-expo) for natural deceleration — objects in the real world don't bounce

• Category: Performance
• Severity: warn
• Source: oxlint-plugin-react-doctor
• Framework: global
• Enabled when: always

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm the inline style uses a cubic-bezier whose Y control points fall outside the [-0.1, 1.1] range (i.e. overshoots), or an animation/animationName containing 'bounce', 'elastic', 'wobble', 'jiggle', or 'spring', or the Tailwind utility animate-bounce. Subtle physics-based springs from Framer Motion are an acceptable exception.

Fix prompt

Use this once validation confirms the diagnostic is real.

Use cubic-bezier(0.16, 1, 0.3, 1) (ease-out-expo) or plain ease-out for natural deceleration. Reserve overshoot bezier curves and animate-bounce for playful illustrations and game UIs — never for default form, toast, or modal feedback. See https://easings.net/

Related rules

More Performance rules from the rules reference:

• react-doctor/no-inline-prop-on-memo-component: Hoist the inline `() => ...` / `[]` / `{}` to a stable reference (useMemo, useCallback, or module scope) so the memoized child doesn't re-render every parent render
• react-doctor/no-large-animated-blur: Keep blur radius under 10px, or apply blur to a smaller element. Large blurs multiply GPU memory usage with layer size
• react-doctor/no-layout-property-animation: Use `transform: translateX()` or `scale()` instead — they run on the compositor and skip layout/paint
• react-doctor/no-layout-transition-inline: Use `transform` and `opacity` for transitions — they run on the compositor thread. For height animations, use `grid-template-rows: 0fr → 1fr`
• react-doctor/no-long-transition-duration: Keep UI transitions under 1s — 100-150ms for instant feedback, 200-300ms for state changes, 300-500ms for layout changes. Use longer durations only for page-load hero animations