Scroll reveal triggers animations (fade, slide, scale) when elements enter the viewport. It guides user attention and makes long pages feel alive.
Key implementation: Use IntersectionObserver — not scroll events — for 10x better performance. Set rootMargin with a negative bottom value so elements trigger 50px after entering the viewport. Use transition-delay for staggered entry. Add will-change: opacity, transform for GPU optimization.
Common pitfalls: Don't use scroll + getBoundingClientRect (janky). Always unobserve after animation in once mode. Don't set threshold too high (elements taller than viewport never fully visible). First-screen elements may flash — skip .reveal class for above-the-fold content.
Full copy-paste code available above. Questions? Leave a comment.
Read the full bilingual version at Deskless Daily.
Top comments (0)