Staggered Grid Reveal
Image grid revealing cell by cell with mask-clip and a diagonal stagger on scroll.
How to use it
- Paste the HTML where the scroll effects should appear. Include the script tags at the top once per page.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Staggered Grid Reveal · NedDev · eigen werk. -->
<!-- benodigd, één keer per pagina: -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<div class="jouw-container">
<div class="sgr-grid"><div class="sgr-cell"></div><div class="sgr-cell"></div><div class="sgr-cell"></div><div class="sgr-cell"></div><div class="sgr-cell"></div><div class="sgr-cell"></div><div class="sgr-cell"></div><div class="sgr-cell"></div><div class="sgr-cell"></div><div class="sgr-cell"></div><div class="sgr-cell"></div><div class="sgr-cell"></div></div>
</div>/* Staggered Grid Reveal · NedDev · eigen werk. */
.sgr-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:8px;padding:7%;background:#fff}
.sgr-cell{border-radius:8px;clip-path:inset(0 0 100% 0);background:#0a0a0a}.sgr-cell:nth-child(3n+1){background:#F5480F}.sgr-cell:nth-child(3n){background:#1a1a1a}// Staggered Grid Reveal · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var cells=root.querySelectorAll('.sgr-cell');var g=window.gsap;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;
if(!g||rm){cells.forEach(function(c){c.style.clipPath='inset(0 0 0% 0)';});return;}
var cols=4;cells.forEach(function(c,i){c._d=(Math.floor(i/cols)+(i%cols))*0.08;});
if(window.ScrollTrigger){window.ScrollTrigger.create({trigger:root,start:'top 78%',once:true,onEnter:function(){cells.forEach(function(c){g.to(c,{clipPath:'inset(0 0 0% 0)',duration:.7,ease:'power3.out',delay:c._d});});}});}else{cells.forEach(function(c){g.to(c,{clipPath:'inset(0 0 0% 0)',duration:.7,ease:'power3.out',delay:c._d});});}
}
init(document.querySelector('.jouw-container'));More scroll effects
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →