Jump to content


iframe stops animating when out of view

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a wallpaper made out of two iframes, a leaderbord with 728x90 and a skyscraper 160x600, so called hockeystick. both iframes are synced via sessionstorage, so the animation runs smoothley across both frames. i animate with greensock anim library. When i scoll down the page, the leaderbord scrolls out of view, the skyscraper is sticky and remains in view. the skyscraper keeps animating, but when i scroll back to top, the leaderbord obviously has stopped the animation when it left the view and now proceeds the animation as if the browser has "frozen" the frame as long as it is out of view (Firefox/Mac). of course it looks ugly, because the animations are now not in sync anymore.

i have seen other hockeysticks that seem not to have that problem. i cannot find something about this issue on google. anyone any idea?



Link to comment
Share on other sites

Do you have a reduced test case of this behaviour?


Off the top of my head, I would assume that is because of how GSAP uses the requestAnimationFrame API to wait for a browser tick before animating and because the iFrames are no longer in view they're not being told by the browser to animate.


I would read this thread here: http://greensock.com/forums/topic/10051-animations-pause-when-browser-tab-is-not-visible/


In which Jack's fixes are:


  1. Force the engine to NOT use requestAnimationFrame (in which case it will use setTimout() under the hood) like this:TweenLite.ticker.useRAF(false). This means it won't "power down" on inactive tweens, but it also means that your site will eat up more battery in those cases and overall animation performance may degrade slightly (probably not noticeable). 
  2. Turn off lagSmoothing() like this: TweenLite.lagSmoothing(0). The down side is that you won't get the benefit of the engine automatically sensing lag and correcting for it, but frankly in most cases this isn't a big issue. If you see jumps in your animation, though, it's wise to have lagSmoothing() enabled. 
  • Like 2
Link to comment
Share on other sites

Hello html5banner.org, and Welcome to the GreenSock Forum!

  • What browser and browser version are you seeing this on?
    ( Firefox limits calling requestAnimationFrame for gifs and iframes out of the viewport or when hidden. Firefox will throttle RAF's in offscreen frames to 1/second. But Chrome will still call requestAniamtionFrame )
  • Does the same thing happen if you wrap your iframe in a div tag, and animate that instead.
  • Does it happen with both iframe and or parent div?

Also like joe_midi advised a reduced codepen example




Link to comment
Share on other sites

I know the browser makers were lowering the frame rate for Flash banners when they weren't in view anymore. Think they started doing this a couple years back. Wonder if they did the same thing for HTML5 banners. I noticed this too when switching between tabs that my one banner will essentially pause itself (or have like a 1FPS frame rate) when not in view.

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.