Jump to content
Search Community

gpu memory best practice(mobile)

boynet 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

what is the best practice of managing gpu memory with gsap?

 

I have 100+ items(each item is complex html) that will need to be tweened somewhen(rotateY)

 

maximum of 4 elements can be tweened in the same time

 

right now when item is needed to be tweened I create a new tween for him and store the tween in tweens array so if some element will be needed to be retweened I can access him without creating new object.

 

I managing this by simple display:block display:none and  transform: none !important elements to free up gpu memory

 

so actually only 6 elements are actually visible anytime in mobile

 

so to simplified it this is the html

<div class "container">
   <div class="tweenable-element invisible element1"></div>
   <div class="tweenable-element visible"></div>
   <div class="tweenable-element visible"></div>
   <div class="tweenable-element visible"></div>
   <div class="tweenable-element visible"></div>
   <div class="tweenable-element invisible"></div>
   <div class="tweenable-element invisible"></div>
   <div class="tweenable-element invisible"></div>
   <div class="tweenable-element invisible"></div>
   <div class="tweenable-element invisible"></div>
</div>
  1. do you recommend me to also remove unused tweens with something like kill() or invalidate()?
  2. should I also free up the tween after killed from the tweens store array?
  3. does unused tween prevent the browser from freeing up memory?

Thanks a lot

 

Link to comment
Share on other sites

1. No, the tween instances themselves won't have any impact on the GPU, and I doubt it'll help you much to kill() them since that requires a little processing as well (I assume your goal here is to maximize performance). 

 

2. Probably not very beneficial. Nah. Especially if you're retaining references elsewhere (you said you're re-using these instances, so you must be). 

 

3. A tween doesn't consume large amounts of memory, no. If you have many hundreds of thousands, maybe. But I've had 10,000+ tween instances generated per second and it was rock solid. The biggest bottleneck BY FAR in cases like this is the browser rendering and managing of DOM elements. GSAP's memory consumption and processing pales in comparison. So I wouldn't focus your energy on the tween instances themselves.

 

Also be careful because when you toggle display from none to block (or whatever), it requires processing and forces a document reflow. That's bad for performance. It might be wiser to just set visibility:hidden since that doesn't force a reflow. And I kinda doubt that you need to set transform:none as well. 

 

By default, GSAP automatically GPU-accelerates transforms during the tween, and then (whenever possible) applies a 3D transform again when the tween is done so that the browser can remove it from the GPU. You can control all that with the force3D property, but most people don't need to mess with that at all. It "just works". :)

  • Like 3
Link to comment
Share on other sites

Thanks.

 

It might be wiser to just set visibility:hidden since that doesn't force a reflow. And I kinda doubt that you need to set transform:none as well. 

 

 

in my case only display:none helped out with performance.

I started doing this hack because on low-middle mobile devices like lg g3 the gpu memory can filled up easily in my case and the animation became really slow and low fps unless I use the display:none.

 

Also be careful because when you toggle display from none to block (or whatever), it requires processing and forces a document reflow

 

 

I noticed it but still I preffer of having 50 ms lags on low end devices vs all animation are laggy

 

Thanks a lot :)

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