Back ease and items pool extension

[Mendax]

Hi once again, 

I am trying to create infinite movement, but have to problems and don't have enough experience to understand what's going on.
 

1. Changing ease: "power1.in" to ease: "back.inOut(1.7)" - second one not works, however first one plays well.
2. All squares created at once before movement started, however I need to create them one by one (when carousel shifted add new square). The problem is, when I tried to call addSquare(6) in onStart, or any other place - squares created, but they don't move(
   
    

Hope u could advice where I need to look. 
Thanks a lot for your time!

See the Pen YzdEONW by Gerikvolf (@Gerikvolf) on CodePen

[Mendax]

If anything remains unclear, I'd be happy to provide further clarification.

[IndM]

Hey @Mendax,

It reminded me of this:
https://greensock.com/docs/v3/HelperFunctions#loop

Does this do the trick?

About issue 2, the left position when creating the new row of squares are getting reset back to 0, so all these boxes are getting stacked.

What I would do is create a global variable that counts the length of the created boxes and apply them to the addSquare index.
So the left position would be counted up instead of resetting after every call.
This creates a lot of boxes next to each other but then I would create a wrapper around the carousel with a fixed width of 400px and overflow hidden.

I will check if I can make it work when I have the time!

[Mendax]

@IndM @Rodrigo, is there a way to create only a single square at each step of an animation and then move it? My concern is performance—specifically, if we're dealing with complex Pixi objects or, in a worst-case scenario, Spine animations, creating multiple objects could be performance-intensive.

To elaborate, I'd like to call a function like addSquare(lastIndexPos) either in the onComplete or onStart callbacks of the GSAP timeline, with the aim of updating a global variable squares: []. However, when I try this approach, it seems that subsequent timeline.to(squares, ...) calls do not affect the newly added square, meaning it does not move. Any ideas on how to overcome this issue?

PS: thanks a lot for yours help and time 

[Rodrigo]

Hi,

 

Most likely you'll have to clear the Timeline in order to add the instances again and restart it. Another option could be to add a new instance for the new elements to the timeline using an approach similar to the one @Carl teaches in this video:

Here is a very old example I made over 6 years ago of an endless marquee in PIXI:

See the Pen bWYgzb by rhernando (@rhernando) on CodePen

 

Other alternative is to clear the timeline and create the timeline child instances again with the new elements. If you check my example you can see that I'm using relative values, but definitely this could cause a jump for the initial setup. The example also uses V2 syntax so you'll have to update it. Also it uses the modifiers plugin instead of the Endless Loop helper function.

 

For what you describe this is not the simplest thing to achieve and we don't have the time resources to provide complex solutions like this to our users.

 

Hopefully this helps.

Happy Tweening!