Repeating tweenFromTo

[_andrewireland]

Hi, there!

Previously ZachSaucier provided me with some fantastic insight into his approach to a looping animation problem I was trying to solve. Due to some visual/design requirements I've ended up trying to achieve this using a slightly different method. Rather than the tween approach he used, I'm trying to loop a section of a timeline a specified amount of times.

Currently, I've tried doing this using the tweenFromTo method below. This works perfectly on the first scroll down and back up the page, but on subsequent scrolls the repeat no longer works.
 

mainTlLoop  
.add(mainTl.tweenFromTo(0, "endLoop"))   
.add(mainTl.tweenFromTo("startLoop", "endLoop", {repeat:6}))

Is there a property I can use to change this behaviour, or do I need to look into another method to succesfully do this? I'd prefer to use the existing timelines if possible. 

I noticed in the tweenFromTo docs it says;
 

Quote

Also note that tweenFromTo() does NOT affect the timeline’s reversed property. So if your timeline is oriented normally (not reversed) and you tween to a time or label that precedes the current time, it will appear to go backwards but the reversed property will not change to true.

Is this part of the issue?

Thanks for any guidance you can offer,
Andrew


 

See the Pen ZEGJQgV?editors=1111 by andrew-ireland (@andrew-ireland) on CodePen

[mikel]

Hey @_andrewireland,

 

How about using gsap.utils.distribute  and stagger?

Regardless of the scroll function - here just an example

 

See the Pen vYOJKav by mikeK (@mikeK) on CodePen

 

Happy distributing ...

Mikel

[ZachSaucier]

I believe that upgrading GSAP to the latest version fixes this issue. Can you confirm?

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

[_andrewireland]

Hi @ZachSaucier, that did fix the issue — thank you!

And also thank you @mikel for bringing gsap.utils.distribute to my attention, I hadn't seen that yet. It seems like a very powerful feature.