Jump to content
Search Community

Performance issue about tweens inside a request animation frame function

Michael31 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello,

 

I've noticed that when a tween value is updating, it has a lot of decimals.

Since I'm using this tween inside a requestAnimationFrame function, I'd like to improve its performance.

 

I saw the snap parameter but I've been wondering if there's a proper way to ask my tween to return less decimals during the update ? 

Also, does the snap parameter affect the performance of a tween ?

 

Thank you very much

 

 

Link to comment
Share on other sites

  • Solution
21 minutes ago, Michael31 said:

Since I'm using this tween inside a requestAnimationFrame function, I'd like to improve its performance.

Is there some reason you think that decimal values are less performant? Technically if you add a rounding step in there, that's another calculation so it'd perform very slightly worse unless the rounded values somehow help another aspect of your project like if rendering on whole pixels is easier on the CPU. Either way, the performance difference between rounding or not rounding will almost surely imperceptible in any real-world way unless maybe you've got thousands of simultaneous tweens running (even then it's somewhat doubtful). 

 

Keep in mind that calculating the interpolated values (what GSAP does) accounts for a tiny percentage of the overall load in most casts - graphics rendering is typically 95%+. Rounding the values may account for 0.01%, thus even if you made it TWICE as fast (doubtful), you'd see an overall performance improvement of...like 0.005% :)

 

And yes, if you really want to add in a rounding step, snap is the way to go. 👍

 

If you're running into performance problems, please post a minimal demo and I'd bet there are other ways that performance could be improved that have nothing to do with rounding. Tough to say without seeing what you're attempting though. Are you creating a whole new tween on every requestAnimationFrame? If so, make sure you're properly handling overwriting (so the other tweens don't build up and compete), and you might want to look into a gsap.quickSetter(). 

  • Like 1
Link to comment
Share on other sites

Hi @elegantseagulls, @GreenSock

Thank you very much for your answers,

 

Since there's a lot of digits to change in the DOM when tweening (for example style="transform:translateX(0.23462456px)"), I though it could impact the global performance of the website... But this was a wrong track.

 

The gsap.quickSetter() function seems to exactly fit my needs. It looks pretty awesone !

 

I just made a CodePen to illustrate how I usually work with GSAP in the case of a moving cursor :

See the Pen xxEvpOW by michaelgrc (@michaelgrc) on CodePen

As you can see, I was using a requestAnimationFrame() to have a cool ease on the movement.

But this method means that there are a lot of tween playing every time on my website. 

I'm tweening a lot of objets with that same method to have cool eases with some deltas values (like a mousemouse or a scroll event)

 

Do you think it's a bad way to proceed ?

If using gsap.quickSetter() allows me to have the exactly same result without using a requestAnimationFrame() function, I should use it to improve the performance of my website.

 

 

Link to comment
Share on other sites

So the gsap.quickSetter() tool is basically for this purpose, so you aren't creating a whole new full tween on every animation frame. the gsap.ticker (https://greensock.com/docs/v3/GSAP/gsap.ticker) in the example uses rAF, but allows you to pass some extra data into it, but you can certainly use rAF with quickSetter.

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

Hey @elegantseagulls,

thanks for your answer. This is the example I saw on the doc. I learned a lot.

 

But in the doc's example, it depends initially on a position. 

Now, I try to do the same using a delta on a wheel event. 

 

This is how I do it using a rAF() 

See the Pen zYKggMj by michaelgrc (@michaelgrc) on CodePen

 

And now, this is how I wrote it using quickSetter and the gsap's ticker :

I want to be sure I didn't make any mistakes on my code. I'm not sure I'm supposed to use the incrementation on line 23 and 24. Plus it seems to jump sometimes. Do I miss something ?

See the Pen bGBbbRr by michaelgrc (@michaelgrc) on CodePen

 

Thank you very much guys for the help.

 

 

 

Link to comment
Share on other sites

58 minutes ago, Michael31 said:

I'm not sure I'm supposed to use the incrementation on line 23 and 24.

It depends on what effect that you want. There isn't one "right way" :) 

 

58 minutes ago, Michael31 said:

it seems to jump sometimes.

Can you please describe how to create the jumping? I can't seem to get it to jump on my laptop with a touchpad.

Link to comment
Share on other sites

Hey @ZachSaucier,

thanks for your answer.

 

4 minutes ago, ZachSaucier said:

It depends on what effect that you want. There isn't one "right way" :) 

This idea is to have a smooth movement depending on the wheel event intensity. The faster you scroll, the more your element is moving away from the center

 

6 minutes ago, ZachSaucier said:

Can you please describe how to create the jumping? I can't seem to get it to jump on my laptop with a touchpad.

I manage to create a jump on my trackpad if I scroll fast in one direction and then scroll fast several time in the other direction. This jump doesn't seems to appear with the rAF() method, the movement is always smooth. 

 

Thank you

Link to comment
Share on other sites

I recorded this little video to show you : 

https://www.dropbox.com/s/tnl1gkgx2g52zwu/Enregistrement de l’écran 2021-01-27 à 17.18.30.mov?dl=0

 

7 minutes ago, ZachSaucier said:

Can you determine what part of the code the jump is coming from?

I'm not sure where to look, that's my issue :)

Would you have done this effect the same way ?

 

Thanks

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