Jump to content
GreenSock

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

Troubleshooting Greensock performance iOS

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

Hi folks, just wondering if anyone can help me with where to look to find out why I am getting performance issues with Greensock in the following circumstances - in iOS Safari, using our custom ad formats.

 

I work for a mobile advertising company, we create custom ad formats which display on a number of sites around the world. Basically we serve animated creative into iframes on article pages, and these iframes animate and appear in various ways on the page that help with customer engagement (see examples here to get some context http://playground.xyz).

 

I've had some issues with one of our Ad Formats (Top and Tail) when it comes to using Greensock inside a moving iframe on iPhones/iOS. iOS places limits on rendering performance for external content in iframes.

 

PLEASE VIEW THE LINKS BELOW ON AN IPHONE...

 

I made a Greensock animation in our Side Push product which worked really well on all devices - 

http://create.playground.xyz/vusada/25/quiet?pos=header-ad&size=320x50

 

I made a similar creative in our Top and Tail product using Greensock and get major jank issues - 

http://create.playground.xyz/zowuzo/27/quiet?pos=header-ad&size=320x50

(You can see the animation working well in the 320x50 banner, but broken in the Top and Tail elements that APPEAR ON SCROLL)

 

I'm just wondering if anyone can give us an idea of how to look 'under the hood' of Greensock to find out if there is anything we can do to fix this performance issue, in our iframes on iOS. We'd love to use the library more extensively, but not sure how to address this performance issue.

 

Many thanks in advance.

If it helps you can sign up free for an account on our creative platform (a JS Bin port) and have a play with the code. Sign up here https://create.playground.xyz/login, then open this link ( http://create.playground.xyz/zowuzo/27/edit) to edit our top and tail / check out the JS.

Link to comment
Share on other sites

Hm, are you saying you think it's a GSAP-specific issue? Like another JS animation library works fine? It sure looks like it's more of a browser issue, but I certainly could be wrong. 

 

There are several things I see that you're doing that browsers (especially iOS) can struggle with: 

  1. SVG. Since it's resolution-independent, browsers must re-fabricate all the pixels on every change/tick. Safari has some bugs that even cause it to not render areas of the SVG that have changed. It's like it locks in a particular redraw area, and then even if your artwork grows outside those bounds, Safari just chops it off. Again, completely unrelated to GSAP. Sometimes you can get around this by placing an invisible <rect> that fills the entire area that should be redrawn. Yuck, I know. 
  2. SVG masks. These are notoriously buggy in various browsers when animated (totally unrelated to GSAP).
  3. position:fixed in Safari can be buggy and resource-intensive for some strange reason (at least that's what I've noticed in the past). 

Have you tried rebuilding without SVG? Or at least without SVG masks? 

 

If you're still having trouble, it'd be super helpful if you could provide a reduced test case in codepen or jsfiddle (frankly, I don't want to sign up for this create.playground.xyz thing, and these other tools are far more useful for troubleshooting things like this).

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

Hello spacewindow,

 

Safari has the most bugs when it comes to position fixed and..

 

Like Jack said a codepen or jsfiddle are more useful. Here is a tutorial on how to create a codepen demo example so we can see what you describe live. Once we have a codepen it makes it easier for the GreenSock community and the GreenSock Support Team to debug your issue.

 

 

:)

  • Like 2
Link to comment
Share on other sites

Thanks guys, I will try to replicate it in a CodePen demo, might be tricky to replicate our tech environment, but I'll give it a crack.

 

Jack - pretty sure its related to what Greensock does under the hood, not SVG-in-iOS related. I had to make a working version of the ad, using jquery.transit (and a couple of manual bug-fixes to get that awful library to work). However, the animation ended up smooth.

 

This version has Greensock still in the 320 banner, but jQuery transit in the Top/Tail parts of the ad.

 

http://create.playground.xyz/qifohe/4/quiet?pos=header-ad&size=320x50

 

Will try and get that CodePen together - could take a while. Thanks for your time!

Link to comment
Share on other sites

I think transit uses CSS animations/transitions under the hood which has its pros and cons. The up side is that iOS usually handles CSS transitions/animations of transforms (only transforms) on a completely different thread, so if the main thread gets bogged down, the transforms could still look decent. The tradeoffs are **many** though. Too many to list, quite frankly. They can suffer from synchronization issues, you cannot animate x/y/scaleX/scaleY/rotation independently, limited easing options, sequencing is a royal pain, and there are various bugs in browsers that force you to apply hacks, SVG transform-origin is a mess, etc., etc., etc... (seriously, I could write 10 more pages of this stuff) :)

 

GSAP doesn't really do any weird magical stuff under the hood that you need to be scared of - all it's doing is applying the transforms directly to the transform attribute via JS instead of tucking it away behind the CSS wall. On many devices, GSAP is much faster than CSS. But on iOS, transforms have a bit of an unfair advantage from a "smooth motion" perspective (only noticeable under heavy stress).

 

Looking forward to seeing the reduced test case.  

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