dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix scroll-reveal hiding above-the-fold content (hero painted after the section below it)

Browse source
This commit is contained in:
Martin Dvořák 2026-09-30 08:05:55 +00:00
commit eb2956c3f9
2 changed files with 23 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/components/editorial-ui.tsx
View file

@ -18,10 +18,20 @@ export function Reveal({
useEffect(() => {
const el = ref.current;
if (!el) return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
el.classList.add("is-in");
return;
}
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
// Only animate what starts below the fold. Anything already on screen stays
// visible — otherwise the hero fades in after the section beneath it.
const rect = el.getBoundingClientRect();
const onScreen = rect.top < window.innerHeight && rect.bottom > 0;
if (onScreen) return;
// Hide it without a transition, then reveal when it scrolls into view.
el.style.transition = "none";
el.classList.add("reveal-armed");
void el.offsetHeight;
el.style.transition = "";
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {