Respects prefers-reduced-motion: the animation is disabled and the final state is shown.
What is a Fade Up In?
Fade up in is the default entrance. The element starts transparent and 24px low, then settles as it scrolls into view, so content feels like it arrives rather than popping. Keep the rise small and the timing ~0.5s or it drags. Trigger it with Intersection Observer, not on load, or off-screen items animate unseen.
Animation Specimen
Trigger
inview
Tech
css
Duration
2.2s
Easing
cubic-bezier(0.16, 1, 0.3, 1)
Performance
transform, opacity
When to use
Headings, cards, or sections as they scroll into view
Any first-paint content that should feel composed
Avoid when
Above the fold on load — let it just appear
Long lists where every row fading draws attention from content
Trigger on scroll-in, not load — animating off-screen elements wastes the effect and can hurt perceived speed.