Jump to content
Search Community

Questions about force3D.

jesper.landberg 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

Hi,

 

I have some questions regarding force3D. I have a pretty animation-heavy site, which runs super smooth in Chrome and Firefox, but very poorly in Safari, and I am looking into all possibilities why this might be. One thing I am thinking about is the way I use force3D.

 

1. Should I use true or auto? 

 

2. Should i use force3D on ALL alements that have alpha or transforms animated? I currently set force3D: "auto" on all of them.

 

3. Any good resources on how to use force3D correctly?

 

Link to comment
Share on other sites

Hi @jesper.landberg,

 

Without a reduced test case, it is difficult, for me at least, to tell you why your animations don't run smoothly on Safari and what can be done to make them better. Could you make a demo for us that runs your animations smoothly on Chrome and Firefox and doesn't run well on Safari?

 

As for the questions, here are the answers, based on the little understanding I have about the system:

  1. I think It depends on use-cases. However I find that its best in most cases to let the engine decide for itself hence `auto`. Link.
  2. As of 1.15.0, `force3D` is set to `auto` by default. No need to explicitly set it in your tweens. The other two values are `true` and `false` to either force GPU involvement or not. Having said that, there is a way to apply `force3D` globally by doing: `CSSPlugin.defaultForce3D = true; /* 'auto' or false */`. Link.
  3. Search for `force3D` in these forums and you should find plenty of posts regarding it.

Hope this helps in some way.

  • Like 2
Link to comment
Share on other sites

Hi @jesper.landberg,

 

Without a reduced test case, it is difficult, for me at least, to tell you why your animations don't run smoothly on Safari and what can be done to make them better. Could you make a demo for us that runs your animations smoothly on Chrome and Firefox and doesn't run well on Safari?

 

As for the questions, here are the answers, based on the little understanding I have about the system:

  1. I think It depends on use-cases. However I find that its best in most cases to let the engine decide for itself hence `auto`. Link.
  2. As of 1.15.0, `force3D` is set to `auto` by default. No need to explicitly set it in your tweens. The other two values are `true` and `false` to either force GPU involvement or not. Having said that, there is a way to apply `force3D` globally by doing: `CSSPlugin.defaultForce3D = true; /* 'auto' or false */`. Link.
  3. Search for `force3D` in these forums and you should find plenty of posts regarding it.

Hope this helps in some way.

 

Thanks for the answer. Going to try to create a demo recreating the issue.

Link to comment
Share on other sites

Hi @jesper.landberg,

 

Without a reduced test case, it is difficult, for me at least, to tell you why your animations don't run smoothly on Safari and what can be done to make them better. Could you make a demo for us that runs your animations smoothly on Chrome and Firefox and doesn't run well on Safari?

 

As for the questions, here are the answers, based on the little understanding I have about the system:

  1. I think It depends on use-cases. However I find that its best in most cases to let the engine decide for itself hence `auto`. Link.
  2. As of 1.15.0, `force3D` is set to `auto` by default. No need to explicitly set it in your tweens. The other two values are `true` and `false` to either force GPU involvement or not. Having said that, there is a way to apply `force3D` globally by doing: `CSSPlugin.defaultForce3D = true; /* 'auto' or false */`. Link.
  3. Search for `force3D` in these forums and you should find plenty of posts regarding it.

Hope this helps in some way.

Hi again,

 

here comes a somewhat simplified demo, but I still get pretty much the same issue, the animation is very jumpy in Safari, it kind of jumps to the middle and goes from there. See for yourself.

 

See the Pen zrNvoN by ReGGae (@ReGGae) on CodePen

 (best to watch in full page mode)

Link to comment
Share on other sites

Don't really notice much difference here on my Macbook but my guess is the browser is having a hard time render a very large image (5615x2907 pixels) or it could be that you are animating `height` that is causing problems.

 

If animating `height` (which, in many cases, could produce janky animations) is the cause, here is a

See the Pen adpvLy by tah_med (@tah_med) on CodePen

with a few amendments for you to try out. As I said, I didn't notice any difference for me in the first place so I can't really tell if this forked version will do any good, but give it a try and let me know how it goes.

Link to comment
Share on other sites

Don't really notice much difference here on my Macbook but my guess is the browser is having a hard time render a very large image (5615x2907 pixels) or it could be that you are animating `height` that is causing problems.

 

If animating `height` (which, in many cases, could produce janky animations) is the cause, here is a

See the Pen adpvLy by tah_med (@tah_med) on CodePen

with a few amendments for you to try out. As I said, I didn't notice any difference for me in the first place so I can't really tell if this forked version will do any good, but give it a try and let me know how it goes.

Well, the image i am actually using in development is "only" 300kb 1920x1080px, so I don't know if that is the problem, might be the height. 

 

Your solution is nice, but I can't use a white overlay, since I am animating it over another page. I am uploading my stuff to a password protected dev server atm, I can PM u the password and you can see the real stuff. 

 

BTW, didn't know u could transform procentual values now (yPercent), is that a new feature? Cleaner than saving the width of an element as a variable when I need to transform full width or height.

Link to comment
Share on other sites

Understand about the image dimensions.

 

I am curious though if it did improve any rendering for you, i.e. a solution using an overlaying element of top of an image to reveal it by animating `translateY` over anything else, even if you are unable to utilize it. And sure, do share what you have and I can help as much as I can.

 

Re `yPercent`, I recommend reading the blog about the release of 1.13.1 version of GSAP. This feature has been available for a while now.

Link to comment
Share on other sites

Understand about the image dimensions.

 

I am curious though if it did improve any rendering for you, i.e. a solution using an overlaying element of top of an image to reveal it by animating `translateY` over anything else, even if you are unable to utilize it. And sure, do share what you have and I can help as much as I can.

 

Re `yPercent`, I recommend reading the blog about the release of 1.13.1 version of GSAP. This feature has been available for a while now.

Yeah animating Y instead of height is for sure more smooth. Maby I have to try something else for my transition than height, want to be smooth in all modern browsers. I'l PM the link.

Link to comment
Share on other sites

Just to clarify some info on force3D, here is some text from the CSSPlugin docs:

 

As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. 

 

The reason we let you experiment with 3 different values (auto, true, false) globally or on a per-tween basis is because there is really no silver-bullet solution. There are a lot of factors (hardware, browsers, property being animated, etc) in play and a setting that works great in one environment may not be the best in another. Our advice is to experiment with each. That being said, animating transform values like x, y, scale are going to most often perform better than width, height, or position.

  • Like 3
Link to comment
Share on other sites

Seems like the issue is almost certainly the image size.

 

Aside from forcing 3D, you could try animating a scaled, low-res image and then swap it for the high-res image onComplete.  'Might give the GPU a little more slack during the tween.

 

'Just a thought.

 

Or use canvas instead.

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