rexdigital.org

rexdigital.org

rexdigital.org

GSAP IMAGE GALLERY BURST

PREVIEW

Code:

CSS:

				
					/*	this code WORKS with the nav - add this in the CSS section of the container holding the images */

.gallery {
  width: 100%;
  height: calc(100vh - 60px);
  position: relative;
}

.cool-img  {
  width: 75px;
  height: 100px;
  overflow: hidden;
  position: absolute;
  margin: 20px;
}

.cool-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Javascript:

				
					
//this WORKS with the nav 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>


    <script>
    
   
      const positions = [
        { top: "0%", left: "0%" },
        { top: "0%", left: "10%" },
        { top: "0%", left: "60%" },
        { top: "16%", left: "30%" },
        { top: "16%", left: "40%" },
        { top: "16%", left: "90%" },
        { top: "32%", left: "65%" },
        { top: "32%", left: "75%" },
        { top: "48%", left: "0%" },
        { top: "64%", left: "30%" },
        { top: "64%", left: "50%" },
        { top: "64%", left: "90%" },
        { top: "80%", left: "20%" },
        { top: "80%", left: "70%" },
        
      ];

        
      const imgs = document.querySelectorAll(".cool-img");
      
      gsap.set(".cool-img", {
        top: "45%",
        left: "50%",
        transform: "translate(-50%, -50%) scale(0)",
      });


      gsap.to(".cool-img", {
        scale: 1.5,
        width: "300px",
        height: "400px",
        stagger: 0.15,
        duration: 0.75,
        ease: "power2.out",
        delay: .5,
        onComplete: scatterAndShrink,
      });
      


      function scatterAndShrink() {
        gsap.to(".cool-img", {
          top: (i) => positions[i].top,
          left: (i) => positions[i].left,
          transform: "none",
          width: "125px",
          height: "150px",
          stagger: 0.075,
          duration: 0.75,
          ease: "power2.out",
        });
      }
    

</script>

video:

REX DIGITAL

STUDIO