How to make a seamless marquee / scroller loop?

[sashaikevich]

I recall seeing a nice marquee example, but I can't track it down. Undoubtedly this is a common use-case for a horizontal marquee / scroller (logos, testimonials, etc.). 

 

I'd like the beginning of the next animation to trail the end of the one that's about to end. As it is, I have a space between the two.

 

Please point me to the example, or check out my code and codepen below:

 

gsap.timeline({
    repeat: -1,
    defaults: {
      ease: "none",
    },
  })
  .fromTo(
    ".card",
    {
      x: (i, el) => innerWidth * i
    },
    {
      x: (i, el, t) => -innerWidth * (t.length - i ),
      duration: d,
    }
  );

Thanks

See the Pen abNMQyg?editors=1010 by sashaikevich (@sashaikevich) on CodePen.

[ZachSaucier]

Hey sashaikevich.

 

This thread covers how to do this sort of thing. You can't use a regular animation because it doesn't wrap properly as you mention. You should use modifiers as the thread below suggests:

 

[sashaikevich]

Thanks @ZachSaucier! 

[sashaikevich]

Got it to work!

For anyone interested, here is GS's pen that was particularly helpful: 

See the Pen QEdpLe?editors=0010 by GreenSock (@GreenSock) on CodePen.