Clip-Path Reveals
Six full-width panels each unveiled with a different clip-path wipe — bottom-up, horizontal, radial burst, drop, inset zoom.
Clip-Path Reveals the 5th of 12 designs in the 12 CSS Scroll Animations collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.
The code
<!-- Full-width rows --> <div class="row"><div class="panel p1"><div class="p-cat">Architecture</div><div class="p-num">01</div><div class="p-cap">Vertical ascent, horizontal ambition — form in tension with itself</div></div></div> <div class="gap"></div> <div class="row"><div class="panel p2"><div class="p-cat">Landscape</div><div class="p-num">02</div><div class="p-cap">Where fog meets stone and neither gives way</div></div></div> <div class="gap"></div> <div class="row"><div class="panel p3"><div class="p-cat">Portrait</div><div class="p-num">03</div><div class="p-cap">Light finds its own angles, always</div></div></div> <div class="gap"></div> <div class="row"><div class="panel p4"><div class="p-cat">Aerial</div><div class="p-num">04</div><div class="p-cap">Patterns visible only from above, invisible to those who live inside them</div></div></div> <div class="gap"></div> <div class="row"><div class="panel p5"><div class="p-cat">Abstract</div><div class="p-num">05</div><div class="p-cap">Form without function. Beauty without purpose. Both are enough.</div></div></div> <div class="gap"></div> <div class="row"><div class="panel p6"><div class="p-cat">Seascape</div><div class="p-num">06</div><div class="p-cap">Where the tide forgets itself in the sound of its own return</div></div></div> <div class="gap-lg"></div> <!-- 3-column grid section with same clips --> <div class="cp-3"> <div class="row"><div class="panel p2"><div class="p-cat">Fauna</div><div class="p-cap">Silent mid-flight</div></div></div> <div class="row"><div class="panel p5"><div class="p-cat">Mineral</div><div class="p-cap">Crystalline structure</div></div></div> <div class="row"><div class="panel p1"><div class="p-cat">Nocturne</div><div class="p-cap">After the city sleeps</div></div></div> </div>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#060606;overflow-x:hidden}
/* Full-width panels (one per row) */
.row{
width:100%;overflow:hidden;position:relative;
margin-bottom:0;
}
.panel{
width:100%;height:52vh;min-height:280px;
display:flex;align-items:flex-end;
padding:2.5rem 5vw;position:relative;overflow:hidden;
}
.panel::before{content:'';position:absolute;inset:0;z-index:0}
/* Atmospheric backgrounds */
.p1{background:#0E0A1C}
.p1::before{background:radial-gradient(ellipse at 70% 30%,rgba(140,60,220,0.4),rgba(80,20,160,0.2) 45%,transparent 70%)}
.p2{background:#08150E}
.p2::before{background:radial-gradient(ellipse at 25% 60%,rgba(20,170,110,0.42),rgba(10,100,60,0.15) 45%,transparent 70%)}
.p3{background:#160A08}
.p3::before{background:radial-gradient(ellipse at 55% 35%,rgba(210,70,50,0.4),rgba(140,30,20,0.2) 45%,transparent 70%)}
.p4{background:#080E18}
.p4::before{background:radial-gradient(ellipse at 38% 65%,rgba(40,100,220,0.42),rgba(20,60,160,0.15) 45%,transparent 70%)}
.p5{background:#141008}
.p5::before{background:radial-gradient(ellipse at 65% 45%,rgba(210,140,30,0.4),rgba(160,90,10,0.2) 45%,transparent 70%)}
.p6{background:#081418}
.p6::before{background:radial-gradient(ellipse at 42% 55%,rgba(20,170,210,0.38),rgba(10,100,160,0.18) 45%,transparent 70%)}
/* Clip-path reveal states */
/* 1: bottom-up wipe */
.row:nth-child(1) .panel{
clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
transition:clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(1).in .panel{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
/* 2: horizontal left-to-right */
.row:nth-child(2) .panel{
clip-path:inset(0 100% 0 0);
transition:clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(2).in .panel{clip-path:inset(0 0% 0 0)}
/* 3: radial circle burst from center */
.row:nth-child(3) .panel{
clip-path:circle(0% at 50% 50%);
transition:clip-path 1.3s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(3).in .panel{clip-path:circle(80% at 50% 50%)}
/* 4: top-down drop */
.row:nth-child(4) .panel{
clip-path:polygon(0 0,100% 0,100% 0,0 0);
transition:clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(4).in .panel{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
/* 5: right-to-left */
.row:nth-child(5) .panel{
clip-path:inset(0 0 0 100%);
transition:clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(5).in .panel{clip-path:inset(0 0 0 0%)}
/* 6: inset zoom from center outward */
.row:nth-child(6) .panel{
clip-path:inset(50% 50%);
transition:clip-path 1.3s cubic-bezier(0.16,1,0.3,1);
}
.row:nth-child(6).in .panel{clip-path:inset(0% 0%)}
/* 3-column grid section */
.cp-3{
display:grid;grid-template-columns:repeat(3,1fr);gap:0.8rem;
padding:0.8rem 0;
}
.cp-3 .row{margin-bottom:0}
.cp-3 .panel{height:40vh;min-height:220px}
/* Text inside panels */
.p-cat{
position:absolute;top:1.75rem;left:5vw;
font-family:'Space Mono',monospace;font-size:10px;
letter-spacing:0.16em;text-transform:uppercase;
color:rgba(255,255,255,0.3);z-index:2;
opacity:0;transition:opacity 0.5s ease 0.95s;
}
.row.in .p-cat{opacity:1}
.p-num{
position:absolute;top:1.75rem;right:5vw;
font-family:'Space Mono',monospace;font-size:11px;
color:rgba(255,255,255,0.15);z-index:2;
opacity:0;transition:opacity 0.5s ease 1s;
}
.row.in .p-num{opacity:1}
.p-cap{
font-family:'DM Serif Display',serif;font-style:italic;
font-size:clamp(20px,2.4vw,36px);
color:rgba(255,255,255,0.9);
position:relative;z-index:2;
opacity:0;transform:translateY(12px);
transition:opacity 0.65s ease 0.88s,transform 0.65s ease 0.88s;
max-width:700px;line-height:1.3;
}
.row.in .p-cap{opacity:1;transform:translateY(0)}
/* section gap */
.gap{height:2px;background:#111}
.gap-lg{height:5rem}
/* 3-col panel text size */
.cp-3 .p-cap{font-size:clamp(16px,1.6vw,24px)}
.cp-3 .p-cat{left:1.5rem}
.cp-3 .p-num{right:1.5rem} const io = new IntersectionObserver(entries=>{
entries.forEach(e=>{
if(!e.isIntersecting)return;
e.target.classList.add('in');
io.unobserve(e.target);
});
},{threshold:0.15});
document.querySelectorAll('.row').forEach(el=>io.observe(el));