Jump to content
GreenSock

html5banner.org

iframe stops animating when out of view / crashes wp sync

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

Lately i've experienced a wired issue: i produced a wallpaper with a leaderboard and a sidebar. they both started animation (gsap) at the the same time. but when i scrolled down the page, and the leaderboard left the view, and i scrolled back to top, the leaderboard had pasued its animation and resumed it when coming back to view, having the effect that the sidebar had almost finished its timeline while the leaderboard was still at the beginning. so the whole sync had been crashed.

 

it seems like firefox on mac is pausing rendering on iframes that are not in view. has anyone experienced the same issue and maybe has a solution for it?

 

thanks and best regards

 

wolfgang

Link to comment
Share on other sites

Which ad platform were you using? Have you reached out to them to see if they set the iframe in question to out of focus or something of the sort once it's no longer inside the viewport? That could cause the requestAnimationFrame to drop down to nearly 0 as an optimisation feature.

Link to comment
Share on other sites

That is browser thing, most modern browsers will have different behavior in treating iframes or even animated gifs when they are out of the viewport or even when hidden with display none. For example Firefox will pause an animated gif when it is hidden and or outside of the viewport. But Chrome and Safari will keep the gif animating when hidden. Basically throttling or disabling requestFrameAnimation() for those hidden or out of the viewport. It looks like the opposite is happening with <iframe> elements in Firefox.

Link to comment
Share on other sites

so basically there is nothing i can do to prevent an iframe from this behaviour :( ?

Link to comment
Share on other sites

Not using RaF would circumvent it but your animation performance would suffer in general. Not advisable.

 

I think you could set a timer at the start of the animation and make it jump to the progress of the timeline once it's back in the viewport.

 

I'm not at my computer now but, if you have a sample I could borrow, I could try and set something up for you. Does this behaviour happens in CodePen as well?

Link to comment
Share on other sites

  • 2 weeks later...

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.
×