Infinite horizontal scroll not being smooth

[Kayque]

as you can see on CodePen, my scrolling is not smooth (at least the horizontal animation), I've tried to add ease for horizontalLoop function but it didn't work, what should I do? I don't have much experience with ScrollTrigger, that's my first time using it.

what I want to achieve with this section is a smooth horizontal scrolling, like, take more time after scrolling in a more natural way than now.

One other thing, if you notice, the cloned items (I clone the images inside the row to make the seamless loop with js) don't have space between the first and last item of the row, I also don't know why, I've tried adding some margin left to the last item but that didn't work because of gsap transforms (to make animation alive).

See the Pen jOgBLVL by Kayquedias (@Kayquedias) on CodePen.

[Rodrigo]

Hi @Kayque and welcome to the GSAP Forums!

 

I would advise you  against modifying the logic of any helper function, since it can have unexpected behaviours.

 

Maybe something like this:

See the Pen MWNprVX by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Kayque]

But when I don't clone the elements, on wider screens, I get a blank space until the first element on the right moves off the screen.

Also, I want the rows to alternate directions, first row moving to  the right, second to left...

their movements are not smooth yet. When I scroll, they move but stop abruply when I stop scrolling, I'd like them stop gradually in a smoother way, how can I do that?

[Rodrigo]

Hi,

 

I updated the demo:

See the Pen MWNprVX by GreenSock (@GreenSock) on CodePen.

 

As for the space at the end in large screens, the helper function predicates on the fact that there are enough elements to cover the space available, if there are not enough elements then cloning them is needed.

 

Hopefully this helps

Happy Tweening!

[Kayque]

Hello it was exactly it, thank you for your help

But now after some moments, like 1 minute or so, the animation starts to freeze, I think it's affecting the performance somehow

here is my updated js code

 

gsap.registerPlugin(ScrollTrigger);

let lastScrollY = window.scrollY

const slides = document.querySelectorAll('.background .splide__list')

window.addEventListener("load", () => {
  const loops = [];
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".brands-section",
      start: "top+=100 bottom",
      end: "bottom top+=200",
      scrub: true,
      onUpdate: (s) => {
        const scrollY = window.scrollY;
        const scrollDirection = scrollY > lastScrollY ? 1 : -1;
        lastScrollY = scrollY;

        gsap
          .timeline()
          .to(loops, {
            timeScale: (i) => (i % 2 > 0 ? 1 : -1) * scrollDirection,
            overwrite: true,
            duration: 0.1
          })
          .to(
            loops,
            {
              timeScale: 0,
              duration: 2,
              ease: 'power2'
            },
            "+=0.1"
          );
      },
    }
  })

  // Clone items to fill row for background animation in brands-section
  slides.forEach((slideList, i) => {
    const slides = slideList.querySelectorAll('.splide__slide');
    
    slides.forEach(slide => {
      const clone = slide.cloneNode(true);
      slideList.appendChild(clone);
    });
  });

  slides.forEach((slide, i) => {
    const lis = gsap.utils.toArray(".splide__slide", slide);
    const reversed = i % 2 > 0;

    loops.push(
      horizontalLoop(lis, {
        repeat: -1,
        speed: 5,
        reversed: !reversed,
      }).timeScale(0)
    );
  });
});

 

[Kayque]

I've just updated my codePen for you. 

See the Pen jOgBLVL by Kayquedias (@Kayquedias) on CodePen.

[Rodrigo]

Try adding will-change to the image on the CSS:

.brand img {
  width: 100%;
  height: 100%;
  border-radius: 1.2rem;
  /* HERE! */
  will-change: transform;
}

 

Hopefully this helps

Happy Tweening!

[Kayque]

Sorry, but it keeps lagging yet /:

[Rodrigo]

Hi,

 

It seems to be working OK when you add will-change: transform on my desktop on the latest Firefox and Chrome on Ubuntu 20 & 22 🤷‍♂️

 

Performance is a deep topic and most of the performance bottlenecks are due to browser rendering rather than a specific GSAP issue, the final advice I can give you is that you're using very large images for smaller sizes, maybe resizing the image could help. Other than that unfortunately IDK what else to offer in this case 😞

[Kayque]

it's weird, because on CodePen it's still lagging after some seconds, could you provide some video or something, because on codePen should be like you said but it's not

I've resized the images but it also didn't change the final result, if you want to use the image below, they are small

I've also tried to run codePen on firefox, but it still freeze after some seconds  ;/

[Kayque]

Hi, I could solve here by changing the ease type, I changed to 'back' type and I have no more lags, do you know why?

I was using power2 as ease type before.

[Rodrigo]

Hi,

 

Couldn't really tell you why exactly, I would have to look into it and see why. Will do when I have a bit of free time.