Infinite Marquee

[Satvik]

Hello GSAP community,

I hope this message finds you well. I'm currently working on implementing an infinite marquee animation using GSAP.

I would greatly appreciate any insights or suggestions you might have to optimize this code and make the animation smoother. Perhaps there's a better approach or specific settings I should be using? I'm particularly concerned about performance on less powerful devices and would like to ensure a consistent experience for all users.

Thank you in advance for your time and expertise. Your input would be invaluable in helping me improve this animation and learn more about efficient GSAP practices.

Looking forward to your guidance and suggestions.

See the Pen LYMNBPX by _static (@_static) on CodePen

[mvaneijgen]

Hi @Satvik welcome to the forum!

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting or code optimisations on these free forums. 

 

That said! Looks great to me! You could maybe look in to having the animation play only when it is in view, ScrollTrigger is great for that. And repeat: -1 can be taxing on the browser, so maybe set it to some large number at which point you don't mind that it stops, like 20 times. Hope it helps and happy tweening! 

 

 

[Rodrigo]

Hi,

 

As @mvaneijgen says: "if it works it works"  

 

Right now it seems that your code is working as you expect. Another option could be the Horizontal Seamless Loop helper function that has been battled tested quite a bit:

https://greensock.com/docs/v3/HelperFunctions#loop

 

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

 

Give that a try and see how it works.

Hopefully this helps.

Happy Tweening!

[Satvik]

Thank you @mvaneijgen and @Rodrigo for your suggestions, I was able to significantly improve the performance and smoothness of my animation. Your willingness to share your expertise and experience is a testament to the strength of this community. It not only helped me solve my immediate challenge but also expanded my understanding of GSAP and animation optimization techniques.

[Satvik]

Hello. I continued working on the solution given by @Rodrigo, the helper functions of GSAP.
What I wanted to achieve right now was to reverse the movement of the cards. I studied the code and also tried some ways to get it reversed, but I am facing a issue here.

See the Pen dywOMyX by _static (@_static) on CodePen

 

I have copied the template code from the helper function loop example as did a few changes to it. I have commented as // changes are done here. where ever I have done the changes.

As you can see the timing and drag function isn't working the way I wanted it to work as.
Could you please help me out figuring out what might be the changes that I should be doing to get the correct output?

I also tried using reversed:true option that was mentioned in the example but it quiet doesn't work in reverse after hovering on the wrapper div.

See the Pen XWoNdpW by _static (@_static) on CodePen

 

[Rodrigo]

Hi,

 

Based on your last example: What exactly is not working there? What's the issue?

 

That is basically working in the way it should based on the code you have there. The one thing I can tell you is that when you're using images you have to wait for the images to be loaded before creating the loop instance, otherwise you'll get odd results:

let loop;
window.addEventListener("load", () => {
  loop = horizontalLoop(elements, { /* config */ });
});

Happy Tweening!

[Satvik]

Hello,
According to the helper function loop example, when we pass reversed:true in the config it should loop in the reverse direction, i.e. loop = horizontalLoop(boxes, { repeat: -1,  draggable: true, reversed: true}); 

But I tried giving the config reversed :true. It works fine in reversed order until I hover on the wrapper container, where the loop pauses and plays, after hovering it starts looping in the original direction instead of reverse.

Here is example i worked on using reversed: true in config.

See the Pen XWoNdpW by _static (@_static) on CodePen

[Rodrigo]

Yeah, the reason is because the play method sets the reversed state to false, while when you create the instance the reversed state is true, so basically instead of play() use reverse() in your mouse event handler:

document
  .querySelector(".wrapper")
  .addEventListener("mouseenter", () => {
    loop.pause();
});

document
  .querySelector(".wrapper")
  .addEventListener("mouseleave", () => {
    loop.reverse();
});

Hopefully this helps.

Happy Tweening!

[Satvik]

Thank You. It is working as I was expecting it to be.