<div class="grid-container">
<div class="grid">
<div class="gridLayer">
<div class="gridBlock"></div>
</div>
<div class="gridLayer">
<div class="gridBlock"></div>
</div>
<div class="gridLayer">
<div class="gridBlock"></div>
</div>
<div class="gridLayer centerPiece">
<div class="gridBlock centerBlock"></div>
</div>
<div class="gridLayer">
<div class="gridBlock"><a href="https://greensock.com" target="_blank"></a></div>
</div>
<div class="gridLayer">
<div class="gridBlock"></div>
</div>
<div class="gridLayer">
<div class="gridBlock"></div>
</div>
<div class="gridLayer">
<div class="gridBlock"></div>
</div>
<div class="gridLayer">
<div class="gridBlock"></div>
</div>
</div>
</div>
.gridBlock {
opacity: 0;
}
/* Grid almost fully pulled from https://www.rino-pelle.com/ */
.grid-container {
width: 100vw;
height: 400vh;
position: relative;
}
.grid {
top: 0;
left: 0;
z-index: 1;
width: 70vw;
height: 60vw;
margin: 0 calc(100vw / 20 * 3);
position: absolute;
}
@media only screen and (max-width: 580px) {
.grid {
margin: 0;
width: 100vw;
height: 89.444vw;
}
}
.gridBlock {
background-size: cover;
background-color: darkgray;
}
.gridLayer {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
will-change: transform;
transform-origin: 44.951% 50%;
}
.gridLayer:nth-child(1) .gridBlock {
top: 5vw;
left: 20vw;
width: 10vw;
height: 10vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(1) .gridBlock {
top: 11.111vw;
left: 23.889vw;
width: 15vw;
height: 15vw;
}
}
.gridLayer:nth-child(2) .gridBlock {
top: 0;
left: 32.5vw;
width: 15vw;
height: 15vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(2) .gridBlock {
top: 0;
left: 43.333vw;
width: 26.389vw;
height: 26.389vw;
}
}
.gridLayer:nth-child(3) .gridBlock {
left: 0;
top: 25vw;
width: 15vw;
height: 15vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(3) .gridBlock {
top: 30.278vw;
left: 0;
width: 26.389vw;
height: 26.389vw;
}
}
.gridLayer:nth-child(4) .gridBlock {
top: 17.5vw;
left: 17.5vw;
width: 30vw;
height: 30vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(4) .gridBlock {
top: 30.278vw;
left: 30.278vw;
width: 39.444vw;
height: 39.444vw;
}
}
.gridLayer:nth-child(5) {
z-index: 1;
}
.gridLayer:nth-child(5) .gridBlock {
top: 20vw;
left: 50vw;
width: 5vw;
height: 5vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(5) .gridBlock {
top: 23.889vw;
left: 73.889vw;
width: 15.278vw;
height: 15.278vw;
}
}
.gridLayer:nth-child(5) a {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.gridLayer:nth-child(5) svg {
width: 1.75vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(5) svg {
width: 4.722vw;
}
}
.gridLayer:nth-child(6) .gridBlock {
left: 50vw;
top: 27.5vw;
width: 20vw;
height: 20vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(6) .gridBlock {
top: 43.889vw;
left: 73.889vw;
width: 26.389vw;
height: 26.389vw;
}
}
.gridLayer:nth-child(7) .gridBlock {
left: 10vw;
top: 42.5vw;
width: 5vw;
height: 5vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(7) .gridBlock {
display: none;
}
}
.gridLayer:nth-child(8) .gridBlock {
bottom: 5vw;
left: 42.5vw;
width: 5vw;
height: 5vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(8) .gridBlock {
display: none;
}
}
.gridLayer:nth-child(9) .gridBlock {
bottom: 0;
left: 50vw;
width: 10vw;
height: 10vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(9) .gridBlock {
top: 73.889vw;
left: 58.889vw;
width: 15.278vw;
height: 15.278vw;
}
}
.gridBlock {
display: block;
position: absolute;
}
<!-- Load GSAP and ScrollTrigger -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
// Custom image URLs for grid blocks
const myImageUrls = [
'http://animations.thedreamer.in/wp-content/uploads/2024/12/6.png',
'http://animations.thedreamer.in/wp-content/uploads/2024/12/beautiful-model-with-colorful-powder_23-2149339792.jpg',
'http://animations.thedreamer.in/wp-content/uploads/2024/12/woman-trees-double-exposure_23-2149303244.jpg',
'http://animations.thedreamer.in/wp-content/uploads/2024/12/spa-concept-with-woman-bathtub_23-2147821067.jpg',
'http://animations.thedreamer.in/wp-content/uploads/2024/12/beautiful-woman-posing-with-powder_23-2149339798.jpg',
'http://animations.thedreamer.in/wp-content/uploads/2024/12/digital-art-style-illustration-river-nature_23-2151825672.jpg',
'http://animations.thedreamer.in/wp-content/uploads/2024/12/illustration-woman-her-cat-pet_23-2151835265.jpg',
'http://animations.thedreamer.in/wp-content/uploads/2024/12/young-woman-who-is-posing-covered-with-black-paint_155003-593.jpg',
'http://animations.thedreamer.in/wp-content/uploads/2024/12/texture-backgrounds_1122-2013.jpg'
];
// GSAP timeline with ScrollTrigger
gsap.timeline({
scrollTrigger: {
trigger: ".grid-container",
start: "top top",
end: () => innerHeight * 4,
scrub: true,
pin: ".grid",
anticipatePin: 1
}
})
.set(".gridBlock:not(.centerBlock)", { autoAlpha: 0 })
.to(".gridBlock:not(.centerBlock)", { duration: 0.1, autoAlpha: 1 }, 0.001)
.from(".gridLayer", {
scale: 3.3333,
ease: "none",
});
// Apply custom images to the grid blocks
gsap.set('.gridBlock', { backgroundImage: i => `url(${myImageUrls[i]})` });
// Central image logic
const bigImg = new Image();
bigImg.addEventListener("load", function () {
gsap.to(".centerPiece .gridBlock", { autoAlpha: 1, duration: 0.5 });
});
bigImg.src = 'http://animations.thedreamer.in/wp-content/uploads/2024/12/1.png';
</script>