Michael31 Posted January 26, 2021 Share Posted January 26, 2021 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 More sharing options...
elegantseagulls Posted January 26, 2021 Share Posted January 26, 2021 Hi @Michael31 I can't imagine the number of digits after the decimal GSAP returns would have much or any impact on performance. Do you have an example of how you're using this? 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 26, 2021 Solution Share Posted January 26, 2021 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(). 1 Link to comment Share on other sites More sharing options...
Michael31 Posted January 26, 2021 Author Share Posted January 26, 2021 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 More sharing options...
elegantseagulls Posted January 26, 2021 Share Posted January 26, 2021 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 2 Link to comment Share on other sites More sharing options...
Michael31 Posted January 27, 2021 Author Share Posted January 27, 2021 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 More sharing options...
ZachSaucier Posted January 27, 2021 Share Posted January 27, 2021 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 More sharing options...
Michael31 Posted January 27, 2021 Author Share Posted January 27, 2021 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 More sharing options...
ZachSaucier Posted January 27, 2021 Share Posted January 27, 2021 7 minutes ago, Michael31 said: 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. Hmm, I can't seem to reproduce it. What sort of jump is it? Can you determine what part of the code the jump is coming from? Link to comment Share on other sites More sharing options...
Michael31 Posted January 27, 2021 Author Share Posted January 27, 2021 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 More sharing options...
ZachSaucier Posted January 27, 2021 Share Posted January 27, 2021 Are you referring to the 3-4 second mark in that video? Were you continuing to scroll up while the that was occurring? 45 minutes ago, Michael31 said: Would you have done this effect the same way ? Ya, your approach is solid if this is what you're trying to accomplish. 1 Link to comment Share on other sites More sharing options...
Michael31 Posted January 28, 2021 Author Share Posted January 28, 2021 Hey @ZachSaucier, Thanks again for your time. Yes I'm referring on what happen a the 4th second and later. I think I was scrolling at this moment but I tried it again and it happens sometimes when I'm not scrolling. It sounds like a detail but I would love to have something smooth at 100% 🤓 Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 28, 2021 Share Posted January 28, 2021 If you can figure out how to reproduce it consistently, especially if it happens when you're not scrolling, please let us know. As it is I don't know if we can be of much help. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now