Reveal on scroll

Makes content appear smoothly the moment the visitor scrolls to it: the element fades in and slides into place. You simply put something inside — a heading, an image, a whole section — and it animates by itself as soon as it comes into view. The technical name is GsapReveal.

Use GsapReveal to give sections a bit of polish as visitors scroll — headings, cards, images, or entire content blocks fade and slide into place instead of appearing abruptly. It works well combined with almost any other block, including a GsapCounter or a Cta section, since it only wraps existing content rather than replacing it.

Use it sparingly on a single page — wrapping every section can make scrolling feel busy rather than smooth. It shines most on the first section a visitor sees below the fold, or right before a key call to action.

Applying reveal effects with restraint

On a webshop's category page, GsapReveal often wraps each product card so the grid animates gently into place as a visitor scrolls down, instead of every card being visible immediately. On a portfolio site it typically wraps each case study card or the introduction section of a project page. On a professional services site it works well around a list of services or a testimonial section, giving otherwise static content some life without needing a full animation library elsewhere on the page.

A common mistake is wrapping every individual element separately — a heading, then each paragraph, then each image — which produces a staggered cascade that reads as chaotic rather than smooth. Wrapping a whole section or card as one unit usually looks cleaner than animating its inner pieces individually. Another mistake is applying it to content above the fold that's visible the instant the page loads — since the reveal triggers on scroll into view, content already in view can flash or fail to trigger correctly depending on where the trigger point falls; save GsapReveal for content that starts off-screen.

Because it only wraps existing content, GsapReveal works with virtually any other block placed inside it: a Cta section, a GsapCounter statistic row, or a card generated by Records. That composability is also why it's easy to overuse — resist wrapping more than a few key sections per page.

The wrapped content exists in the page markup from the start; only its opacity and position animate in on scroll, so nothing depends on JavaScript to be readable, and search engines and screen readers see the full content regardless of whether the animation has played.

Example

The prompt for this example

Put a panel on the page with the heading 'Welcome to Obelisk' and make it appear smoothly while scrolling.