Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pzagor2

onComplete not called when tab is inactive

Recommended Posts

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×