How to Create a Scroll-Reveal Effect with CSS in GeneratePress and GenerateBlocks

Recently, I stumbled across Google DeepMind’s Gemini-era landing page, and let me tell you—it’s packed with some seriously cool design elements. But one feature in particular caught my eye: a scroll-reveal effect that feels like peeling back a curtain as you scroll down the page.

Now, we’ve all seen scroll-based effects before—images that start small and scale up as you scroll, for example. But this was different. The image stayed the same size, and instead, a mask around it was revealed as you scrolled. Naturally, I had to figure out how to recreate this effect using GeneratePress and GenerateBlocks. Spoiler alert: it’s surprisingly simple, and I’ll walk you through it step by step.

Setting Up the Layout

For this demo, I created a basic page layout with three sections:

1. Top Section: A minimum height of 100% viewport height to give us room to scroll.
2. Middle Section: This is where the magic happens. It contains a wrapper, an inner container, and the image we’ll apply the reveal effect to.
3. Bottom Section: Another 100% viewport height section for additional scrolling space.

The middle section is where we’ll focus our efforts. While I’m using an image for this example, you can apply the effect to any element on your site. Just don’t go overboard—subtlety is key here.

Adding the Class for the Effect

To start, I added a custom class to the image element: owd-reveal. This class will be the target for our CSS magic. Once the class is set, I updated the page and jumped into the WordPress Customizer to write the CSS.

Writing the CSS

Here’s the CSS that powers the scroll-reveal effect:

css.owd-reveal {
  animation: owd-reveal linear forwards;
  animation-timeline: view();
  animation-range: entry;
}

@keyframes owd-reveal {
  0% {
    clip-path: inset(25%);
  }
  100% {
    clip-path: inset(0%);
  }
}

Breaking It Down:

1. Animation Name: The animation is called owd-reveal, and it runs linearly without repeating.
2. Animation Timeline: The view() function ties the animation to the viewport, so it triggers as the element enters the screen.
3. Animation Range: entry ensures the animation runs as the element enters the viewport.
4. Keyframes: The clip-path property creates the reveal effect. At 0%, the image is masked by an inset of 25%. At 100%, the mask is removed, revealing the full image.

Enhancing the Effect

Adding a Border Radius

One issue with the clip-path approach is that it overrides any border radius applied directly to the image. To fix this, I added a round value to the clip-path at 100%:

css@keyframes owd-reveal {
  0% {
    clip-path: inset(25%);
  }
  100% {
    clip-path: inset(0%) round 16px;
  }
}

This ensures the border radius grows subtly as the image is revealed, adding a nice touch to the animation.

Using Custom Properties

To make the CSS more manageable, I introduced a custom property for the border radius:

css:root {
  --radius: 16px;
}

@keyframes owd-reveal {
  0% {
    clip-path: inset(25%);
  }
  100% {
    clip-path: inset(0%) round var(--radius);
  }
}

Now, if I want to change the border radius, I only need to update the --radius value.

Fine-Tuning the Reveal

The clip-path inset percentage controls how much of the image is initially hidden. Here’s how different values affect the animation:

• 50%: The image is almost completely hidden, making the reveal happen faster.
• 10%: The effect is too subtle and barely noticeable.
• 25%: A balanced choice that ensures the reveal is visible without being overwhelming.

Feel free to experiment with this value based on your design needs.

Accessibility Considerations

Animations are fun, but they shouldn’t come at the expense of accessibility. To respect users who prefer reduced motion, you can wrap the animation in a prefers-reduced-motion media query:

css@media (prefers-reduced-motion: no-preference) {
  .owd-reveal {
    animation: owd-reveal linear forwards;
    animation-timeline: view();
    animation-range: entry;
  }
}

This ensures the effect only runs for users who haven’t opted out of motion-based animations.

Final Thoughts

This scroll-reveal effect is a great way to add subtle interactivity to your site without overwhelming visitors. It’s perfect for landing pages or sections where you want to draw attention to specific elements. Just remember: less is more. Overusing animations can quickly turn a sleek design into a chaotic mess.

I first noticed this effect on Google’s landing page, and it immediately sparked ideas for my own projects. With just a few lines of CSS, you can recreate it and customize it to fit your needs. Whether you’re using GeneratePress, GenerateBlocks, or another stack, this technique is a great addition to your toolkit.

So, what do you think? Ready to give this a try on your next project?