How to split two logo columns on scroll in Elementor with GSAP

SHARE

SIGN UP FOR THE NEWSLETTER

Your subscription could not be saved. Please try again.
Your subscription has been successful.


Code:

Javascript/GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    
<script>
        document.addEventListener("DOMContentLoaded", function () {
    gsap.registerPlugin(ScrollTrigger);

    const stickyBar = document.querySelector(".sticky-bar");
    const footerTrigger = document.querySelector(".trigger-footer");
    const footerTriggerHeight = footerTrigger.offsetHeight;

    function getStickyBarCenter() {
      return stickyBar.offsetTop + stickyBar.offsetHeight / 2;
    }

    document.querySelectorAll(".row").forEach((row) => {
      ScrollTrigger.create({
        trigger: row,
        start: () => `top+=${getStickyBarCenter() - 550} center`,
        end: () => `top+=${getStickyBarCenter() - 450} center`,
        scrub: true,
        onUpdate: (self) => {
          const progress = self.progress;
          const maxGap = window.innerWidth < 900 ? 10 : 15;
          const minGap = window.innerWidth < 900 ? 0.5 : 1;
          const currentGap = minGap + (maxGap - minGap) * progress;
          row.style.gap = `${currentGap}em`;
        },
      });
    });

    document.querySelectorAll(".row").forEach((row) => {
      ScrollTrigger.create({
        trigger: row,
        start: () => `top+=${getStickyBarCenter() - 400} center`,
        end: () => `top+=${getStickyBarCenter() - 300} center`,
        scrub: true,
        onUpdate: (self) => {
          const progress = self.progress;
          const maxGap = window.innerWidth < 900 ? 0.5 : 1;
          const minGap = window.innerWidth < 900 ? 10 : 15;
          const currentGap = minGap + (maxGap - minGap) * progress;
          row.style.gap = `${currentGap}em`;
        },
      });
    });

    ScrollTrigger.create({
      trigger: footerTrigger,
      start: "top bottom",
      end: () => `top+=${footerTriggerHeight - window.innerHeight} center`,
      scrub: true,
      onUpdate: (self) => {
        const startTop = 50;
        const endTop = 92;
        const newTop = startTop + (endTop - startTop) * self.progress;
        stickyBar.style.top = `${newTop}%`;
      },
    });

    ScrollTrigger.create({
      trigger: footerTrigger,
      start: () =>
        `top+=${footerTriggerHeight - (window.innerHeight + 100)} bottom`,
      end: "bottom bottom",
      scrub: true,
      onUpdate: (self) => {
        const fontSizeStart = window.innerWidth < 900 ? 2.5 : 1.25;
        const fontSizeEnd = 9;
        const newFontSize =
          fontSizeStart + (fontSizeEnd - fontSizeStart) * self.progress;
        stickyBar.querySelectorAll("p").forEach((p) => {
          p.style.fontSize = `${newFontSize}vw`;
        });
      },
    });
  });
 </script>

CSS

/* add this in the parent container as shown in the video */

.sticky-bar {
    transform: translateY(-50%);
    mix-blend-mode: difference;
}

.sticky-bar .item:nth-child(1),
  .sticky-bar .item:nth-child(3) {
    flex: 2;
  }

  .sticky-bar .item:nth-child(3) {
    text-align: right;
  }

  .sticky-bar .item:nth-child(2) {
    flex: 1;
    text-align: center;
  }

  .sticky-bar .item p {
    color: #fff;
    font-size: 1.25vw;
  }
  
  
/* add this in the container holding your logo images as shown in the video */

  .clients {
    width: 100%;
    padding: 10em 1em;
    background: #fff;
  }

  .row {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1em;
  }

  .logo p {
    font-size: 40px;
  }



Video:

SIGN UP FOR THE NEWSLETTER

Your subscription could not be saved. Please try again.
Your subscription has been successful.