vintage12
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by vintage12
-
-
16 minutes ago, Shaun Gorneau said:
This seems to run even better on an old iPhone 6 ... wondering if you see the same.
There does seem to be an improvement yes, I just swapped out the box shadow stars for the ones you coded in that pen (thanks also for that, saved me a job!). Here's my PC's CPU usage showing the difference between the old version and the new version:
Old version: https://lightspeed-digital.com/
New version: http://lightspeed.ldstage.com/
There is still some stuttering, but I guess we're nearing full optimisation now.
-
19 hours ago, GreenSock said:
Something smells fishy here. You're only using GSAP to animate 3 elements, right? That's dirt-cheap performance-wise (remember, GSAP is only responsible for updating properties which probably accounts for less than 5% of the overall load). I'm super curious to see a comparison. Can you send us the CSS-only version alongside the GSAP-driven one? I want to make sure we're comparing apples-to-apples.
Here is the CSS only version:
I'm seeing huge performance improvements when my browser is set to 2000px width, the CSS version runs smoothly while the JS version is very stuttery. I think it's down to my browser (Firefox) trying to use hardware acceleration with no graphics card present as Chrome handles that situation with no issues.
-
25 minutes ago, GreenSock said:
Something smells fishy here. You're only using GSAP to animate 3 elements, right? That's dirt-cheap performance-wise (remember, GSAP is only responsible for updating properties which probably accounts for less than 5% of the overall load). I'm super curious to see a comparison. Can you send us the CSS-only version alongside the GSAP-driven one? I want to make sure we're comparing apples-to-apples.
Yeah, just the three elements. Unfortunately I won't be able to get the CSS version uploaded until tomorrow now, but I'll reply here again when it's ready.
13 minutes ago, Shaun Gorneau said:@vintage12 Nice site, by the way!
After the initial scroll in ( "Lets Go" click or user scroll ), the subsequent scroll navigation looks like it could use some debouncing.
But .. I'm curious is the star movement on your site is where you are seeing any jitter. Because I see none here.
Thank you! Yes, I'll need to take a look at the scroll navigation afterwards I think.
It's on the star movement, yes. It also only seems to adversely affect a small percentage of users, if their CPU can't handle it, they have too many tabs open or their browser tries to use hardware acceleration without a dedicated graphics card on their PC. (I fall into the latter of those and experience problems only part of the time). Mobile performance I've never seen or had a report of a drop below 100%.
-
Thanks for the advice, I've switched to using y instead of transform.
My original setup was pure CSS and that performed orders of magnitude better. I guess getting anything approaching that level of performance just won't be possible doing this with JS?
-
Hi,
I've been having some performance issues with a feature on my website that uses Greensock. I've broken it down into the minimal parts on Codepen and the live website is here: https://lightspeed-digital.com
Is there any way I can improve on this? Using pure CSS isn't an option as I have a function to speed up the stars (not shown within codepen).
Thanks for any help!
Performance Improvements For Transforms
in GSAP
Posted
I'll set that up tomorrow and report back.
I did add those but didn't see any noticeable improvements, sorry for not reporting back.
Shaun's version has improved performance to 100% on both machines that were causing me trouble, so overall I think we can call this one solved!