/* ========================================================================== TYRONEHARRISON - SCROLL REVEAL Reveals elements as they scroll into view. ONE motion, used everywhere: a soft fade while rising a short distance. There are deliberately no direction variants - mixing left/right/zoom entrances across a page reads as noise. Rhythm is varied with delay and stagger only, never with direction. Usage:
...
Modifiers: data-reveal-delay="200" delay this element by 200ms data-reveal-duration="1200" override the 900ms default data-reveal-stagger="140" on a PARENT: stagger its revealing children 140ms apart Everything is gated behind .has-scroll-reveal on , which the inline head script adds. Without JavaScript nothing is ever hidden. ========================================================================== */ .has-scroll-reveal [data-reveal] { --reveal-duration: 900ms; --reveal-distance: 28px; --reveal-easing: cubic-bezier(0.22, 0.61, 0.36, 1); opacity: 0; transform: translate3d(0, var(--reveal-distance), 0); transition: opacity var(--reveal-duration) var(--reveal-easing), transform var(--reveal-duration) var(--reveal-easing); will-change: opacity, transform; } /* -------------------------------------------------------------------------- Revealed state -------------------------------------------------------------------------- */ .has-scroll-reveal [data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0); } /* Once the transition finishes the script strips [data-reveal] entirely, so the element goes back to its own styles (card hover lifts, image zooms) with no leftover will-change holding a compositor layer open. */ .reveal-done { will-change: auto; } /* -------------------------------------------------------------------------- Accessibility: honour reduced-motion by showing content outright -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .has-scroll-reveal [data-reveal], .has-scroll-reveal [data-reveal].is-revealed { opacity: 1; transform: none; transition: none; will-change: auto; } }