Scroll Reveal
Elements animate into view as they enter the viewport — fade, slide, or scale. The most common scroll animation on modern websites.
Also called: fade-in on scroll, entrance animation, AOS
✦
First element
Fades and slides up when it enters the viewport.
◈
Second element
Each item can have a staggered delay for a cascade effect.
◎
Third element
Uses Intersection Observer — performant, no scroll listeners.
◇
Fourth element
Scroll back up and down to see it trigger again.
How it works
IntersectionObserver watches each element. When it crosses into view, a .visible class is added, triggering a CSS transition.
- Start state:
opacity: 0; transform: translateY(40px) - End state:
opacity: 1; transform: translateY(0) - Libraries: AOS, ScrollReveal, GSAP ScrollTrigger