Jump to content
Search Community

GSAP slow on android browser

jo_alterego test
Moderator Tag

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'm using Greensock animations for a web app I'm developing. On iOS, desktops the scroll animation plays really smooth, there's no problem.

On Android browser things get complicated. On some devices it plays good(Nexus 5, Galaxy S4) on others it's choking(Nexus 7)

I've tried setting the z property(TweenLite.set(element, {z:0.1}) ;), using x, y instead of top, left but nothing changed.

 

I'm wondering if there's anything I can do to speed up GSAP on android browser. 

Any help is appreciated.

 


Link to comment
Share on other sites

Hello jo_alterego, and Welcome to the GreenSock Forum!

  • What mobile browser and browser version did you view this on, in the Nexus 7?
  • Also what Android version is it?

Have you tried adding force3D:"auto" to your tween? .. What about trying this:

:

TweenLite.set(element, {z:0.1,force3D:"auto"});

:

force3D is part of the CSSPlugin. Below is taken from the CSSPlugin Docs

 

force3D

when you set force3D:true, it forces GSAP to apply a 3D value to the element's transform, meaning matrix3d() instead of matrix(), or translate3d() instead of translate() which typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In other words, setting force3D:true usually boosts performance, making movement more smooth. However, if you exceed the GPU's memory limit, performance will degrade, so it's not wise to force3D:true everything all the time. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details. In our experience, though, it helps performance more often than not. The default value is false.

 

Does that help?

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

The Android browser is notoriously terrible. Curious if you have tried Chrome on the Nexus 7.

 

Its really hard to trouble shoot without access to the code (like in a CodePen demo). I don't have a Nexus 7 but I imagine others around here have similar hardware.

The only thing I noticed that might be of concern is the very large png with transparency that you are trying to flick. I know it is very  important to the design, but I'd suggest testing with a non-transparent version to see if there is a noticeable difference. 

 

On these under-powered mobile devices, JavaScript execution is still VERY fast (which is what GSAP does), its the speed at which the browsers render and update the screen (out of GSAP's control) which usually brings things to a halt. large transparent pngs that are moving around on top of other things can be quite a bit of work to manage. 

 

My best advice is really just trial and error. Keep removing things and see how they impact performance.

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