Jump to content


Seamless loop issue + how to debug

Recommended Posts

Hello.. I have the seamless loop almost working, but the diagonal changes direction when it restarts. Im not sure why that is and Im not sure the debugging technique i could use to figure it out.

I know the issue is here return (wrapperWidth-x) % 300+ "px";

I know the issue is in my math, but i am uncertain how to work it out manually

I am following the seamless loop codepen btw,

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

Any ideas below is the codepen with the issue





See the Pen XWJZRad by dwayneaneckles (@dwayneaneckles) on CodePen

Link to comment
Share on other sites

I assume you were going for something more like this, right? 

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


Since all the animation is in a simple timeline, you can alter the timeScale() or hook it up to a scrubber or use that animateToIndex() function I put at the bottom to animate to a specific box/index. Everything loops seamlessly.

Hopefully I understood what you were going for and this helps get you on the right path.

You can mess with the qtyVisible number, offsetX/offsetY or startX/startY or whatever to get things set up the way you want. It's a rough sketch at least.

  • Like 2
Link to comment
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.