Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.

[jollygreen]

I'm trying to create an infinite carousel with a stop button.  I got the following error on the console: "Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string." Because of that my stop button doesn't work.  Would you know why I got this error?  Your help would be appreciated.  

 

See the Pen WmwYOW by jollygreen10 (@jollygreen10) on CodePen

 

See the Pen WmwYOW by jollygreen10 (@jollygreen10) on CodePen

[GreenSock]

I don't quite understand what you're trying to do, but I definitely know why you're getting that error. You're calling add() on a TimelineMax and feeding in an array of null values because your slide() method doesn't return anything. In other words:

var test = slide(...); //<-- this doesn't return anything!
console.log(test); //null

 

Therefore, this:

TLentries.add([ slide(boxArray[0], boxArray[1], boxArray[2], boxArray[3], 0) ]); 

 

Is basically like doing this: 

TLentries.add([null]); 

 

Hence the error. It doesn't work to add null to a timeline

 

If I knew what you were trying to accomplish, I might be able to offer a solution. I don't really understand why you're even using multiple timelines or maybe you're trying to nest things(?) But right now you're putting everything into the TLentry timeline anyway, so TLentries serves absolutely no purpose (other than to throw errors because you're adding null values to it). 

[jollygreen]

I understood.  I was trying to build a side scrolling carousel that stops at number 5 when we click the stop button.  Would there be an efficient way of doing it?

[GreenSock]

Ah, okay. Well, I think the way you've got things built makes the code a lot more cumbersome and animating "left" is far less performant (in most cases at least) than animating transforms like "x". So here's a quick rework I did for you: 

 

See the Pen 082ec86bdd65c67a6437a352dd6efc70?editors=1010 by GreenSock (@GreenSock) on CodePen

 

And it stops at 5 if you click "stop". 

 

Hopefully that gets you heading in the right direction. Happy tweening!

 

[jollygreen]

@GreenSock - this is awesome.  Thank you very much!