Back to library
INTERACTION_015
Scroll Reveal.
An IntersectionObserver toggles a single class; CSS handles opacity and a 14px translate. The baseline entrance for every section.
- CATEGORY
- Scroll
- COMPLEXITY
- Easy
- TECH
- CSS + JS
- PLATFORM
- Both
- PERFORMANCE
- Light
LIVE PLAYGROUND
JavaScript / JS
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("in");
io.unobserve(entry.target);
}
});
}, { threshold: 0.15 });
document.querySelectorAll("[data-reveal]").forEach((el) => io.observe(el));CSS / CSS
[data-reveal] {
opacity: 0;
transform: translateY(14px);
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].in { opacity: 1; transform: none; }IF YOU LIKE THIS, STEAL THESE TOO.
INTERACTION_017CSS + JS
Stagger Reveal
Children enter in sequence with a fixed delay step.
Scroll / LightView
INTERACTION_131CSS
Depth Parallax
Three layers move at different speeds to build depth.
Scroll / LightView
INTERACTION_132CSS
Background Color Transition
Page surfaces shift tone as each section takes over.
Scroll / LightView