Seamless loop issue + how to debug

[dneckles]

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

 

Dwayne

 

 

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

[GreenSock]

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.

[Shaun Gorneau]

I'm not sure of what kind of effect you're going for here, but maybe this can help.

 

See the Pen bGNLyLO by sgorneau (@sgorneau) on CodePen