Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sashaikevich

How to make a seamless marquee / scroller loop?

Recommended Posts

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

Link to post
Share on other sites

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:

 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×