Staggered Grid Waves — Live CSS Playground

{CF} CodeFronts Back to CSS Scroll Animations Staggered Grid Waves CSS + JS

HTML

<!-- Wave 1: slide up -->
<div class="grid wave1">
  <div class="card"><div class="img g1">🌊</div><div class="body"><div class="cat" style="color:#60A5FA">Ocean</div><div class="name">Deep Currents</div><div class="meta">Photography · 2024</div></div></div>
  <div class="card"><div class="img g2">🔮</div><div class="body"><div class="cat" style="color:#A78BFA">Crystal</div><div class="name">Refraction</div><div class="meta">Abstract · 2024</div></div></div>
  <div class="card"><div class="img g3">🌿</div><div class="body"><div class="cat" style="color:#34D399">Botanic</div><div class="name">Overgrowth</div><div class="meta">Nature · 2024</div></div></div>
  <div class="card"><div class="img g4">🔥</div><div class="body"><div class="cat" style="color:#FB923C">Ember</div><div class="name">Controlled Burn</div><div class="meta">Documentary · 2024</div></div></div>
  <div class="card"><div class="img g5">⚡</div><div class="body"><div class="cat" style="color:#60A5FA">Storm</div><div class="name">Discharge</div><div class="meta">Science · 2024</div></div></div>
  <div class="card"><div class="img g6">🌸</div><div class="body"><div class="cat" style="color:#F472B6">Bloom</div><div class="name">First Light</div><div class="meta">Portrait · 2024</div></div></div>
  <div class="card"><div class="img g7">🍄</div><div class="body"><div class="cat" style="color:#A3E635">Mycelium</div><div class="name">Spore Networks</div><div class="meta">Macro · 2024</div></div></div>
  <div class="card"><div class="img g8">🏔️</div><div class="body"><div class="cat" style="color:#FB7185">Geology</div><div class="name">Pressure Points</div><div class="meta">Aerial · 2024</div></div></div>
  <div class="card"><div class="img g9">🌌</div><div class="body"><div class="cat" style="color:#818CF8">Cosmos</div><div class="name">Deep Field</div><div class="meta">Astro · 2024</div></div></div>
</div>

<div class="divider"></div>

<!-- Wave 2: alternate sides -->
<div class="grid wave2">
  <div class="card"><div class="img g5">🦋</div><div class="body"><div class="cat" style="color:#67E8F9">Fauna</div><div class="name">Wing Patterns</div><div class="meta">Macro · 2024</div></div></div>
  <div class="card"><div class="img g1">🏞️</div><div class="body"><div class="cat" style="color:#93C5FD">Alpine</div><div class="name">Ridge at Dusk</div><div class="meta">Landscape · 2024</div></div></div>
  <div class="card"><div class="img g6">🌙</div><div class="body"><div class="cat" style="color:#C4B5FD">Lunar</div><div class="name">Crescent</div><div class="meta">Astrophoto · 2024</div></div></div>
  <div class="card"><div class="img g3">🐚</div><div class="body"><div class="cat" style="color:#6EE7B7">Tidal</div><div class="name">Low Tide</div><div class="meta">Seascape · 2024</div></div></div>
  <div class="card"><div class="img g2">🔬</div><div class="body"><div class="cat" style="color:#DDD6FE">Micro</div><div class="name">Cell Division</div><div class="meta">Science · 2024</div></div></div>
  <div class="card"><div class="img g8">🌅</div><div class="body"><div class="cat" style="color:#FCA5A5">Golden</div><div class="name">Hour Break</div><div class="meta">Portrait · 2024</div></div></div>
  <div class="card"><div class="img g4">🏜️</div><div class="body"><div class="cat" style="color:#FCD34D">Desert</div><div class="name">Arid Season</div><div class="meta">Travel · 2024</div></div></div>
  <div class="card"><div class="img g9">🐠</div><div class="body"><div class="cat" style="color:#7DD3FC">Pelagic</div><div class="name">Open Water</div><div class="meta">Underwater · 2024</div></div></div>
  <div class="card"><div class="img g7">🌺</div><div class="body"><div class="cat" style="color:#86EFAC">Tropics</div><div class="name">Hibiscus</div><div class="meta">Flora · 2024</div></div></div>
</div>

<div class="divider"></div>

<!-- Wave 3: fall from above -->
<div class="grid wave3">
  <div class="card"><div class="img g2">🪸</div><div class="body"><div class="cat" style="color:#F9A8D4">Reef</div><div class="name">Coral Maze</div><div class="meta">Underwater · 2024</div></div></div>
  <div class="card"><div class="img g7">🌾</div><div class="body"><div class="cat" style="color:#D9F99D">Field</div><div class="name">Harvest Wind</div><div class="meta">Rural · 2024</div></div></div>
  <div class="card"><div class="img g4">🏙️</div><div class="body"><div class="cat" style="color:#FCA5A5">Urban</div><div class="name">Neon Spill</div><div class="meta">Street · 2024</div></div></div>
  <div class="card"><div class="img g6">❄️</div><div class="body"><div class="cat" style="color:#BAE6FD">Arctic</div><div class="name">Ice Sheet</div><div class="meta">Expedition · 2024</div></div></div>
  <div class="card"><div class="img g1">🌊</div><div class="body"><div class="cat" style="color:#6EE7B7">Biolume</div><div class="name">Night Shore</div><div class="meta">Nature · 2024</div></div></div>
  <div class="card"><div class="img g8">🦅</div><div class="body"><div class="cat" style="color:#FDE68A">Raptor</div><div class="name">Thermal Ride</div><div class="meta">Wildlife · 2024</div></div></div>
  <div class="card"><div class="img g3">🌲</div><div class="body"><div class="cat" style="color:#A7F3D0">Forest</div><div class="name">Old Growth</div><div class="meta">Nature · 2024</div></div></div>
  <div class="card"><div class="img g5">🌫️</div><div class="body"><div class="cat" style="color:#E0F2FE">Mist</div><div class="name">Valley Floor</div><div class="meta">Landscape · 2024</div></div></div>
  <div class="card"><div class="img g9">🪐</div><div class="body"><div class="cat" style="color:#E9D5FF">Orbit</div><div class="name">Ring Shadow</div><div class="meta">Astro · 2024</div></div></div>
</div>

<div class="divider"></div>

<!-- Wave 4: fan out -->
<div class="grid wave4">
  <div class="card"><div class="img g8">🐙</div><div class="body"><div class="cat" style="color:#F9A8D4">Deep Sea</div><div class="name">Ink Cloud</div><div class="meta">Marine · 2024</div></div></div>
  <div class="card"><div class="img g2">🌃</div><div class="body"><div class="cat" style="color:#C4B5FD">Nocturne</div><div class="name">City After Rain</div><div class="meta">Street · 2024</div></div></div>
  <div class="card"><div class="img g5">🌤️</div><div class="body"><div class="cat" style="color:#93C5FD">Aerial</div><div class="name">Cloudbreak</div><div class="meta">Sky · 2024</div></div></div>
  <div class="card"><div class="img g7">🌳</div><div class="body"><div class="cat" style="color:#86EFAC">Canopy</div><div class="name">Sunbeam Path</div><div class="meta">Forest · 2024</div></div></div>
  <div class="card"><div class="img g1">🧊</div><div class="body"><div class="cat" style="color:#BAE6FD">Glacial</div><div class="name">Blue Cavern</div><div class="meta">Expedition · 2024</div></div></div>
  <div class="card"><div class="img g4">🌶️</div><div class="body"><div class="cat" style="color:#FCA5A5">Harvest</div><div class="name">Spice Market</div><div class="meta">Travel · 2024</div></div></div>
  <div class="card"><div class="img g6">🦩</div><div class="body"><div class="cat" style="color:#F0ABFC">Wading</div><div class="name">Still Pool</div><div class="meta">Wildlife · 2024</div></div></div>
  <div class="card"><div class="img g3">🌊</div><div class="body"><div class="cat" style="color:#6EE7B7">Surge</div><div class="name">Wave Break</div><div class="meta">Ocean · 2024</div></div></div>
  <div class="card"><div class="img g9">🌑</div><div class="body"><div class="cat" style="color:#818CF8">Eclipse</div><div class="name">Total Shadow</div><div class="meta">Astro · 2024</div></div></div>
</div>

CSS

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#0E0C09;overflow-x:hidden;padding:4vw}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.1rem;
  margin-bottom:1.1rem;
}

.card{
  border-radius:14px;overflow:hidden;
  opacity:0;
  transition:opacity 0.78s cubic-bezier(0.16,1,0.3,1),transform 0.78s cubic-bezier(0.16,1,0.3,1);
}
.card.in{opacity:1;transform:none !important}

/* stagger delays */
.card:nth-child(1){transition-delay:0s}
.card:nth-child(2){transition-delay:0.08s}
.card:nth-child(3){transition-delay:0.16s}
.card:nth-child(4){transition-delay:0.06s}
.card:nth-child(5){transition-delay:0.14s}
.card:nth-child(6){transition-delay:0.22s}
.card:nth-child(7){transition-delay:0.04s}
.card:nth-child(8){transition-delay:0.12s}
.card:nth-child(9){transition-delay:0.20s}

/* wave 1: slide up + slight scale */
.wave1 .card{transform:translateY(64px) scale(0.93)}

/* wave 2: slide from alternating sides */
.wave2 .card:nth-child(odd){transform:translateX(-48px) rotate(-1.5deg)}
.wave2 .card:nth-child(even){transform:translateX(48px) rotate(1.5deg)}

/* wave 3: fall from above */
.wave3 .card{transform:translateY(-52px) scale(0.95)}
.wave3 .card:nth-child(2){transform:translateY(-70px) scale(0.92)}
.wave3 .card:nth-child(5){transform:translateY(-85px) scale(0.9)}
.wave3 .card:nth-child(8){transform:translateY(-60px) scale(0.94)}

/* wave 4: fan out from center */
.wave4 .card:nth-child(1){transform:rotate(-4deg) translate(-30px,30px) scale(0.9)}
.wave4 .card:nth-child(2){transform:translateY(50px) scale(0.92)}
.wave4 .card:nth-child(3){transform:rotate(4deg) translate(30px,30px) scale(0.9)}
.wave4 .card:nth-child(4){transform:rotate(-3deg) translateX(-20px) scale(0.93)}
.wave4 .card:nth-child(5){transform:scale(0.85)}
.wave4 .card:nth-child(6){transform:rotate(3deg) translateX(20px) scale(0.93)}
.wave4 .card:nth-child(7){transform:rotate(-5deg) translate(-30px,-20px) scale(0.9)}
.wave4 .card:nth-child(8){transform:translateY(-40px) scale(0.93)}
.wave4 .card:nth-child(9){transform:rotate(5deg) translate(30px,-20px) scale(0.9)}

.img{
  height:190px;display:flex;align-items:center;
  justify-content:center;font-size:2.8rem;
  position:relative;overflow:hidden;
}
.img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,0.3));
}
.body{background:#1C1915;padding:1.1rem}
.cat{
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;margin-bottom:0.45rem;
}
.name{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:16px;color:#F0EBE0;margin-bottom:0.3rem;
}
.meta{font-size:12px;color:rgba(240,235,224,0.28)}

/* divider between waves */
.divider{
  height:1px;background:rgba(255,255,255,0.05);
  margin:3rem 0;opacity:0;
  transition:opacity 0.8s ease,width 1s cubic-bezier(0.16,1,0.3,1);
  width:0%;
}
.divider.in{opacity:1;width:100%}

/* gradient image backgrounds */
.g1{background:linear-gradient(145deg,#0D2340,#1B3A6B)}
.g2{background:linear-gradient(145deg,#1A0E35,#2E1B5A)}
.g3{background:linear-gradient(145deg,#0D2016,#173A25)}
.g4{background:linear-gradient(145deg,#2E0E0A,#4A1A14)}
.g5{background:linear-gradient(145deg,#0A1628,#162440)}
.g6{background:linear-gradient(145deg,#22102A,#3A1840)}
.g7{background:linear-gradient(145deg,#0A1C12,#142B1C)}
.g8{background:linear-gradient(145deg,#1E0E08,#341A0D)}
.g9{background:linear-gradient(145deg,#0A1828,#14243A)}

const io = new IntersectionObserver(entries=>{
  entries.forEach(e=>{
    if(!e.isIntersecting)return;
    e.target.classList.add('in');
  });
},{threshold:0.1,rootMargin:'0px 0px -60px 0px'});
document.querySelectorAll('.card,.divider').forEach(el=>io.observe(el));