onComplete not called when tab is inactive

[pzagor2 2 Likes (Newbie)]

Hi all.

 

I'm working on this item scroll animation. The first item of the list gets moved to the bottom and all other items move up by the height of the first item. 

 

It works OK when the example loads for the first time, but when you open another tab it gets out of sync because the `onComplete` does not get called. You can see this by checking the console logs while the tab is inactive.

 

Any suggestion on what I'm don't wrong or how can I fix/improve this code.

 

Regards

 

 

See the Pen wZwgGN by pzagor2 (@pzagor2) on CodePen

[GreenSock 8,117 Likes (Superhero)]

If I understand your question correctly, it sounds like you may just be running into the lagSmoothing feature (which is very intentional, of course). Read about it here: https://greensock.com/docs/TweenLite/static.lagSmoothing

 

You can easily disable it:

TweenLite.lagSmoothing(0);

 

Does that help at all? 

[pzagor2 2 Likes (Newbie)]

It does help a little bit, but the items still offset a bit when the tab is inactive. It's more visible if I decrease the timeout. I updated the codepen.

 

I also try adding this:

TweenMax.ticker.useRAF(false);

 

It did not seem to help.

 

I would much rather fix the code so that I don't have to disable these optimization features. 

[GreenSock 8,117 Likes (Superhero)]

Why are you using a setInterval()? I would strongly recommend against that because it's not at all tied to browser refreshes (paints), and it's not synchronized with GSAP in any way. It would be much better to use a TweenMax.delayedCall() instead so that everything is perfectly synchronized. And I wouldn't recommend turning useRAF off either. Perhaps I'm missing the reason you were wanting to do that though. 

[pzagor2 2 Likes (Newbie)]

Thank you for your help.

 

I found a solution by replaced setTimeout with TweenMax repeat. 

 

The first codepan also had a bug with how the initial height of elements was calculated.  Below is a working version.

 

See the Pen VNeWxL by pzagor2 (@pzagor2) on CodePen