Anti-pattern · Motion · High
Ease-in on Enter
Ease-in on enter is the mistake of animating an element into view with an ease-in curve, which delays the instant the user is waiting for.
The tell
Entering or opening elements whose motion starts slow and speeds up.
Why it happens
Ease-in is the default in many animation libraries and it is symmetric with the exit curve, so it gets applied to both directions without thought.
The rule
Enter with ease-out, exit with ease-in. Never the reverse.
- Set every entering element to ease-out or a custom cubic-bezier that starts fast.
- Set every exiting element to ease-in so it accelerates away.
- Replace the CSS default `ease` and `linear` throughout — both are too weak for UI.
What is a Ease-in on Enter?
Ease-in starts slow and accelerates. On an element leaving, that is correct — it should gather speed as it goes. On an element entering, it means the thing you clicked for spends its first frames barely moving, so the whole interface reads as lag. Entering elements take ease-out: fast off the mark, settling gently into place.
Paste this after your existing prompt to strip the pattern from the result.