Seamless loop direction change on scroll is not working infinitely

[codechirag]

I was  looking for marquee on scroll direction change example  and  thanks to this wonderful  community I got it,  I  saw  many threads for similar thing and one   of them worked for me but I have little difference in my  example, I have used  helper function to make infinite  and also  for two  opposite  direction simultaneously.

 

In my snippet the directions  are working  fine but it stops after sometimes and also at some points I found initially both were  going in one direction. I request corrections from experts. Thanks a lot.

See the Pen jOJRywp by EmpChirag (@EmpChirag) on CodePen.

[mvaneijgen]

You can pass the helper function the repeat property an then set it to -1 if you don't want it to stop. Hope it helps and happy tweening! 

 

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

See the Pen poYBwBB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[codechirag]

thanks alot @mvaneijgen, your solution is correct but when I use it in my react project it is jerking  when I  add repeat: -1 and also  when I just make a codeblitz  snippet only for this section it worked fine. please look at this  loom video , I will be very much thankful to you if you can correct me.

 

here  I am  sharing my project fork in stackblitz. you can find that effect at the very bottom of  the page.

 

[Rodrigo]

Hi,

 

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

Here are a couple of demos of the horizontal loop with the useGSAP hook:

https://stackblitz.com/edit/vitejs-vite-cljwjs?file=src%2FApp.jsx

 

This changes the loop direction based on the scroll direction:

https://stackblitz.com/edit/vitejs-vite-auctqy?file=src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!

[codechirag]

Hey @Rodrigo, Thanks a lot I understood it and working fine now by the  above method.

[thinkbridget]

Hi, apologies if this isn't the right place to ask my own question, I'm new here! I'm using the code @mvaneijgen provided to create a looping marquee of images with the same functionality. I'm having trouble with two things:

 

1. How to add a margin at the end of the loop that matches the rest of the images' spacing
2. How can I add a pause effect on hover

See the Pen QWegXXL by Bridget-Guckin-the-selector (@Bridget-Guckin-the-selector) on CodePen.

 

Thanks!

[mvaneijgen]

@thinkbridget this is fine, but it is better to start your own topic.

 

I've removed some of your CSS which seems to cause the issue, I've also moved to only a padding-right which gets you a more consistent width between elements. 

 

For the pausing you can call .pause() on the helper function, so adding a .addEventListener() of mouseenter on the element will get you there, see the code in the JS panel. You probably also want to watch for mouseleave to call .play() again!

 

Hope it helps and happy tweening! 

 

See the Pen KKOqOQg?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen.

[Rodrigo]

Hi,

 

Is worth mentioning that the helper function has a paddingRight configuration option for this case:

const loop = horizontalLoop(elements, {
  repeat: -1,
  paused: false,
  paddingRight: 20 // amount in pixels here
});

Happy Tweening!

[thinkbridget]

Thank you for the help! I did have one more question, how would I go about switching the directions the marquees move in? I'd prefer the first row to initially move left to right and the second row right to left.

[mvaneijgen]

 

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

For this check out the value xPercent you're giving to each loop function and see if you can spot the difference the two function have. It is min(-imal) difference, but I think you can figure it out!

 

Hope it helps and happy tweening! 

 

 

[Rodrigo]

On 10/19/2024 at 2:19 PM, thinkbridget said:

Thank you for the help! I did have one more question, how would I go about switching the directions the marquees move in? I'd prefer the first row to initially move left to right and the second row right to left.

Hi,

 

The Horizontal Loop helper has a reversed config option (boolean) that allows you to set the direction of the loop (left-to-right or right-to-left), you can use the remainder JS operator in order to check the index of each loop parent and use that to set the direction:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder

const loopContainers = gsap.utils.toArray(".loop-container");
loopContainers.forEach((el, i) => {
  // Scope the selector to each loop container
  const elements = gsap.utils.toArray(".element", el);
  const loop = horizontalLoop(elements, {
    repeat: -1,
    paused: false,
    paddingRight: 10,
    // Direction based on the loop container index
    reversed: (i % 2) > 0,
  });
});

Here is a simple demo showing that:

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

 

Hopefully this helps

Happy Tweening!