Infinite Vertical Scroll Glitch

[caleb_case]

I'm having issues with the vertical scroll loop I have built out where it glitches on repeat. Here's my code below, any help would be appreciated. And a live URL for where it currently lies: https://careers.primeinc.com

 

;(function(){
    let chck_if_gsap_loaded = setInterval(function(){
	const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active");
       if(window.gsap && window.ScrollTrigger && !eleBuilder){
            gsap.registerPlugin(ScrollTrigger);
			animateImages(cols);
            clearInterval(chck_if_gsap_loaded);
        }
    }, 100);
const cols = gsap.utils.toArray(".col");
function animateImages(cols) {
  let offset = 0;

  cols.forEach((col, i) => {
    const images = col.childNodes;

    // DUPLICATE IMAGES FOR LOOP
    images.forEach((image) => {
      var clone = image.cloneNode(true);
      col.appendChild(clone);
    });

    // SET ANIMATION
    images.forEach((item) => {
      let columnHeight = item.parentElement.offsetHeight;
      let direction = i % 2 !== 0 ? "+=" : "-="; // Change direction for odd columns
      let yOffset = direction === "+=" ? -offset : offset;

      let tween = gsap.to(item, {
        y: direction + Number(columnHeight / 2),
        duration: 20,
        repeat: -1,
        ease: "none",
        onRepeat: () => {
          offset = 0;
        },
        modifiers: {
          y: gsap.utils.unitize((y) => {
            y = (parseFloat(y) + yOffset) % (columnHeight * 0.5);
            return y;
          })
        }
      });
      document.querySelectorAll(".col").forEach((img) => {
        img.addEventListener("mouseover", () => {
          if (tween) tween.pause();
        });

        img.addEventListener("mouseout", () => {
          if (tween) tween.resume();
        });
      });
    });
  });
}
})();

.main {
  padding: 0;
  max-height: 900px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: visible;
}

.gallery {
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1366px) {
  .main {
    max-height: 800px;
  }
}
@media (max-width: 1024px) {
  .main {
    max-height: 400px;
    overflow: hidden;
    overflow-y: hidden;
  }
}

.col {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  align-self: flex-start;
  justify-self: flex-start;
}

.col:nth-child(2) {
  align-self: flex-end;
  justify-self: flex-end;
  justify-content: flex-end;
}

.image {
  width: 100%;
  padding: 1rem;
}

.image:hover {
  z-index: 99999999999 !important;
  
}

.image iframe {
   transition: 0.3s ease-out;
  overflow: hidden;
  width: 100%;
  border-radius: 20px;
  box-shadow: rgba(0,0,0,.15) -3px 3px 20px;
}

.image img {
  transition: 0.3s ease-out;
  overflow: hidden;
  width: 100%;
  border-radius: 20px;
  box-shadow: rgba(0,0,0,.15) 3px 3px 20px;
}

 

<section class="main">
<div class="gallery">
  <div class="col">
    <div class="image">
      <img src="https://images.pexels.com/photos/1086584/pexels-photo-1086584.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
    </div>
    <div class="image">
      <img src="https://images.pexels.com/photos/1089194/pexels-photo-1089194.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
    </div>
    <div class="image">
      <img src="https://images.pexels.com/photos/1601775/pexels-photo-1601775.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
    </div>
    <div class="image">
      <img src="https://images.pexels.com/photos/2902541/pexels-photo-2902541.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
    </div>
    
   
  </div>
  <div class="col">
    <div class="image">
      <img src="https://images.pexels.com/photos/1086584/pexels-photo-1086584.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
    </div>
    <div class="image">
      <img src="https://images.pexels.com/photos/1089194/pexels-photo-1089194.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
    </div>
        <div class="image">
        <img src="https://images.pexels.com/photos/1601775/pexels-photo-1601775.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    </div>
        <div class="image">
      <img src="https://images.pexels.com/photos/2902541/pexels-photo-2902541.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
    </div>
  </div>
</div>
</section>

 

[GSAP Helper]

Hi @caleb_case and welcome to the GreenSock forums!

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[caleb_case]

Okay I went ahead and forked the codepen and added the code. It looks to be running correctly how it should when testing it in the codepen. However, on the live site it's not performing this smoothly.

 

See the Pen poxgVvJ by caleb-case (@caleb-case) on CodePen

[Rodrigo]

Hi,

 

Well, the good news is that you know now that the issue is somewhere else in your app. If the problem is that the animation is not as smooth, you can try removing some parts or perhaps in your CSS try using will-change: transform on the images:

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

 

Finally you can take a look at this example that uses the Seamless Vertical Loop helper function:

See the Pen abaQdwe by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!