What entrances are actually for
An entrance animation orients the eye. When new content appears — a modal, a search result, a section scrolling into view — a brief fade or slide tells the viewer where it came from and that it belongs there. Content that simply pops into existence forces the eye to re-scan the page to work out what changed.
Direction carries meaning. Content sliding up reads as arriving from below (natural for scroll reveals); sliding down suits notifications and dropdowns descending from the top; sliding in from a side fits drawers and panels. Matching the direction to where the element actually lives makes the motion feel explanatory rather than arbitrary.
Triggering entrances on scroll
Most entrances are used as scroll reveals, and the right way to trigger them is IntersectionObserver — not a scroll listener. A scroll handler fires hundreds of times a second on the main thread and forces layout reads; IntersectionObserver does the visibility maths off-thread and calls you only when an element crosses the threshold you set.
Reveal each element once and then stop observing it. Content that re-animates every time it scrolls back into view is distracting and makes a page feel unstable — a mistake that's easy to make and easy to fix with observer.unobserve(entry.target).
Staggering, restraint and reduced motion
For lists and grids, a small animation-delay per item — around 50 to 80ms — creates a cascade that guides the eye through the sequence. Beyond about eight items the last ones take too long to arrive, so cap the stagger rather than multiplying indefinitely.
The most common failure is animating everything. If every section on a page fades in, the effect stops meaning anything and the page feels slow because content is perpetually arriving. Reserve entrances for content that genuinely appears in response to something, and honour prefers-reduced-motion so people who've asked for stillness get it.