/** * Scroll reveal -- a standalone utility class. * * Not ported from the design: this is a reusable effect, added so any section * can opt into it by carrying the class. Nothing references it implicitly, so * dropping the class removes the effect entirely. * * Usage: add `rc-reveal-up` to the section's class list. In the block editor * that is the block's Advanced > Additional CSS class(es) field; in markup it * goes straight on the wrapper. * *
...
* * The section rests 32px low and transparent, then eases up into place the * first time it enters the viewport. `reveal-up.js` adds `is-revealed` to do * it; the class is never removed, so scrolling back up does not replay it. * * Every rule is scoped under `.rc-js`, which `reveal-up.js` puts on * before first paint. Without that guard a visitor whose JavaScript failed * would meet a page of permanently invisible sections -- here they simply * get the sections, unanimated. * * The starting offset is `translateY`, not `margin` or `top`, so the reveal * never reflows the page around it. */ .rc-js .rc-reveal-up { opacity: 0; transform: translateY(32px); transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 0.8, 0.28, 1); will-change: opacity, transform; } .rc-js .rc-reveal-up.is-revealed { opacity: 1; transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .rc-js .rc-reveal-up { opacity: 1; transform: none; transition: none; } }