Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Why does the animations slowly stops when I am in a different tab?

Why does the animations slowly stops when I am in a different tab or when window is minimized?

It's this codepen link - http://codepen.io/heyjules/pen/LVoEOw

It works fine at first. But then once you tab out or minimize (for about 5- 10 sec), The "particles" have lessened, or even completely gone.

I know it's got something to do with "setTimeOut" (I've dug up some resources https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Inactive_tabs). Thing is I'm not good with javascript :( How do I stop this from happening? Like I want it to keep running whether or not I'm in the tab or browser.

1 Answer

If you are not viewing the animated page, the logical thing will be to stop the animation and get some performance advantage. This is how requestAnimationFrame() or similar API supposed to work.

Remember that animations requires a lot of redrawing which is done by Browser.

In short, requestAnimationFrame is smarter version of setTimeOut() variants. I'm also not that good at JavaScript especially animating part. So I'm relying on external source.

Related article Dev.Opera || TeamTreeHouse Blog

Thanks a lot man

No problem just rely on those article but not what I mumbled.

Self-driven testing is always good but it's hard when you know little so I tend to accept my limit.