archimedo Posted January 5, 2021 Share Posted January 5, 2021 Hi everyone, I made a simple animation where 3 shapes bounce around the screen (my inspiration was the dvd logo effect). I'd like to use this animation as a background for a website homepage's section. The thing is that I'm afraid it is too heavy and browser resources consuming, so I was thinking to make the same thing but GSAP. Do you think that would be effective? is there a way to actually increase the performance of my animtion? can you help me understand how to achieve it with GSAP? Thank you! See the Pen zYKjJVO by archemede (@archemede) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 6, 2021 Share Posted January 6, 2021 Hey archimedo. Using GSAP won't magically make non-performant properties become performant The biggest performance hit that you'll have will come from the mix-blend-mode regardless of whether or not your JS uses GSAP. The second worst thing is you're animating of the top and left properties - you should not do that but instead animate transforms (in GSAP that's the x and y properties). You're wise to use images that have the blur baked in instead of trying to do the blur in real time. Another thing to improve performance is to store the dimensions instead of calling clientWidth and clientHeight every tick because those force reflow/layout. You should instead have a resize function that updates these (and the other relevant values) when the page is resized, perhaps throttling that so it doesn't need to fire every single time the resize event fires. Past that you could rewrite your code to be easier to maintain and perhaps slightly more performant but you likely wouldn't notice much of a difference performance wise. 2 Link to comment Share on other sites More sharing options...
mikel Posted January 6, 2021 Share Posted January 6, 2021 Hey @archimedo, My favorite is mostly SVG and this random concept. See the Pen mdVJxwj by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
archimedo Posted January 6, 2021 Author Share Posted January 6, 2021 4 hours ago, mikel said: Hey @archimedo, My favorite is mostly SVG and this random concept. Happy tweening ... Mikel Thank you for your reply, unfortunately I can't see the animation on your codepen Link to comment Share on other sites More sharing options...
mikel Posted January 7, 2021 Share Posted January 7, 2021 Hey @archimedo, I have no idea. It works on my MAC / CHROME. Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
GreenSock Posted January 7, 2021 Share Posted January 7, 2021 @mikel the problem is that you didn't define any radius for your <circle> elements, so some browsers default to 0 whereas others default to something else. So on browsers that default to 0, all the circles are essentially invisible. 1 Link to comment Share on other sites More sharing options...
mikel Posted January 7, 2021 Share Posted January 7, 2021 Hey Jack, Thank you for your review. However, I do not understand your comment. The radius is defined in the CSS. And CANIUSE shows no problems für circle:r Happy watching ... Mikel Link to comment Share on other sites More sharing options...
GreenSock Posted January 7, 2021 Share Posted January 7, 2021 Well all I can say is that on my iPad (latest OS) it was completely invisible. I added the "r" attribute and BOOM, it worked perfectly. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted January 7, 2021 Share Posted January 7, 2021 Also, caniuse.com may be reporting the compatibility of the "r" attribute, not CSS. It's unclear to me from glancing at it. 1 Link to comment Share on other sites More sharing options...
mikel Posted January 7, 2021 Share Posted January 7, 2021 Thank you for glancing. In these times you can no longer rely on anything. Except Jack checked it or you did the job yourself. Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
mikel Posted January 7, 2021 Share Posted January 7, 2021 And ... See the Pen NWRzmvp by mikeK (@mikeK) on CodePen 2 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