Circle Reveal

The code

A glimpse of the source:

<div class="transition-preview" id="circleReveal">
    <div class="transition-content old-content">Page A</div>
    <div class="transition-content new-content">Page B</div>
    <div class="transition-overlay circle-reveal-overlay">
    </div>
  </div>
  <button class="trigger-btn" onclick="triggerCircleReveal()">Trigger Transition</button>
</div>

Concrete use cases

A few real contexts where Circle Reveal shines:

• Opening a photo gallery
• A checkout funnel step change
• A scroll-triggered content reveal

How it works

CSS + a lightweight vanilla JavaScript script (no dependency). It relies on a @keyframes animation, CSS transforms and clip-path masking.

Make it yours

You can tweak:

• animation speed (currently 1.2s)

Add it in 3 steps

1. Paste the HTML where you want the effect on your page.
2. Add the CSS to your stylesheet (or in a <style> tag).
3. Add the small JavaScript snippet before </body> — done.

Browser support

Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation. clip-path is supported everywhere modern.

More Transitions effects

FAQ